그 방법으로 css3 애니메이션을 건너 뛸 수 있습니까?

Question

애니메이션은 디스플레이에서 요소가 표시 될 때 항상 재생됩니다. 스타일에 맞춤 체크 박스를 원하면. 사용자가 확인하거나 선택을 취소 할 때만 애니메이션을 재생하면됩니다.

input[type=checkbox] { opacity: 0; } // native checkbox hidden 
input[type=checkbox] ~ .mycheck { 
    animation: uncheck 300ms ease-out forwards; // play uncheck animate 
} 
input[type=checkbox]:checked ~ .mycheck { 
    animation: check 300ms ease-out forwards; // play checked animate 
} 

문제는 사용자가이를 클릭하면 check 및 uncheck은 재생되지 않습니다. 페이지가로드 될 때도 재생됩니다. 또는 부모 요소가 표시로 숨겨져있을 때 예 : 부트 스트랩 탭에 있습니다.

나는 자바 스크립트가 쉽게 처리 할 수 ​​있다는 것을 알고있다. 그러나 실제로이 문제는 관심 github 프로젝트 https://github.com/FezVrasta/bootstrap-material-design/issues/48에서 온 것입니다. 그 잘 생긴 소년 bootstrap3에 의해 Google 소재 디자인을 구현합니다.

현재 나는 (완벽하지는 않다) 방법을 생각할 수 있습니다. :not(:hover)을 animation-duration: 1ms;으로 설정하십시오. 애니메이션이 빨리 종료되도록하십시오. 그러나 사용자는 여전히 짧은 플리커를 보입니다.

input[type=checkbox]:not(:hover) ~ .mycheck { 
    animation-duration: 1ms; 
} 

0ms로 설정할 수 없습니다. 그렇지 않으면 사용자가 마우스를 올릴 때까지 애니메이션이 재생되지 않습니다.

더 좋은 방법이 있습니까?

Answer 1

당신은 당신이 :not(:hover)에 대해 생각 솔루션을 사용하여 간단하게 함께 애니메이션을 취소 할 수 있습니다 :

input[type=checkbox]:not(:hover) ~ .mycheck { 
    animation: none; 
} 

나, 나는 애니메이션을 사용하고 전환을 사용하지 않는, 그것은 여기에 가장 좋은 방법이라고 생각 대신. 즉 (불투명도 애니메이션을하고 가정) 그런 일이 발생할 것이다 :

input[type=checkbox] ~ .mycheck { 
    opacity: 0; 
    transition: opacity .3s ease-out; 
} 

input[type=checkbox]:checked ~ .mycheck { 
    opacity: 1; 
} 

또한, 브라우저에 따라 당신이 달성 크롬은 최근의 전환에 그들을 떨어 공급 업체 접두사를 마음에 원하는 지원 부동산

편집 : 몇 가지 테스트 후, 나는 충분해야한다에만 :focus 의사 클래스를 사용하여 생각 왔어요 :

input[type=checkbox]:focus ~ .mycheck { 
    animation: uncheck 300ms ease-out forwards; 
} 
input[type=checkbox]:focus:checked ~ .mycheck { 
    animation: check 300ms ease-out forwards; 
} 

체크 박스가 포커스를 잃을 때 내가 볼 수있는 유일한 단점은, 애니메이션 취소 될 수 있습니다