브라우저 탭을 변경할 때마다 포커스 애니메이션이 반복됩니다. 나는 이것을 막고 싶다. 그것을 할 방법이 있습니까? 어떤 도움을 주셔서 감사합니다.CSS 포커스 애니메이션 반복
여기 데모 없습니다 :
<div id="box" tabindex="0">
Click me...
<div id="box-dropdown">...and now switch your browser tab</div>
당신이 탭을 변경 http://output.jsbin.com/vidapu, 당신은 더 이상 요소 "집중"입니다. 다시 변경하면 초점 상태가 복원됩니다. 이 동작을 방지하는 유일한 방법은 포커스가 아닌 다른 것으로 애니메이션을 트리거하는 것입니다. 클릭시 트리거되도록하려면 JavaScript 클릭 이벤트를 사용해야합니다.
처음에 애니메이션 상자에 display: none;을 설정하고 단추를 클릭하면 display: block;으로 변경하십시오.
문제는 자바 스크립트를 피하고 싶지만 어쨌든 도움을 주셔서 감사합니다! – Hvrxld
JavaScript를 피하기 원하는 이유가 있습니까? 그것은 이유가 존재합니다 :) –
탭을 전환하면 포커스가 복원되므로 애니메이션이 다시 재생됩니다. 첫 번째 상자를 클릭 한 후 다른 상자를 표시하려면 첫 번째 상자에 onClick 이벤트를 추가하고 기본적으로 숨겨진 상자에서'hidden' 클래스를 제거하십시오. –
나는 그것을 시험해 볼 것이다, 환호. – Hvrxld