CSS 전환이 때때로 느려집니다.

Question

불투명도가 변경된 일부 CSS 전환을 수행했습니다. javascript를 통해 새로운 클래스를 추가하거나 제거하여 시작했습니다.

이 같은입니다 :

.element { 
    opacity: 0; 
    z-index; -1; 
    display: none; 
    transition: opacity .2s linear; 
} 

.changeDisplay { 
    display: block; 
} 

.show { 
    z-index: 1; 
    opacity: 1 
} 

자바 스크립트를 통해 내가 클릭 한 후 클래스 변경을 발생시키는의 EventListener했다. 처음에는 .changeDisplay 클래스가 추가되고, setTimeout (delay, 4) 함수 뒤에 .show 클래스도 추가됩니다. 4ms (최소 허용 지연 값이어야 함) 지연은 애니메이션 페이드 인 (불투명도 전환)이 작동하는 데 중요합니다.

문제는 - 때로는 예상대로 작동하지 않습니다! 애니메이션이 때때로 느려지므로 애니메이션 효과가 전혀 작동하지 않습니다 (마치 디스플레이 변경을 통해 나타 났던 것처럼 보입니다).

왜 그런가요 매 매끄러운 애니메이션을 얻으려면 어떻게해야합니까? 나는 Chrome (android mobile chrome), Opera, Firefox 및 IE (Safari는 내 집에 사과 부족으로 인해 테스트되지 않음)에서이 동작을 관찰했습니다.

Answer 1

내 경험에 비추어 볼 때 작고 섬세한 애니메이션을 원한다면 약 0.7 초의 애니메이션 지속 시간이 가장 좋은 것 같습니다.

게다가 지연을 추가하는 대신 할 수있는 일은 .show를 콜백 함수에 추가하는 코드를 넣는 것입니다. 이렇게하면 .changeDisplay 클래스가 추가 되 자마자 .show 클래스가 추가됩니다.
지연을 원하십니까?
전환 지연 : 0.4 초;