1 초 강조 표시를 허용하도록 CSS3 전환을 설정할 수 없습니다.

Question

1 초 강조 표시를 위해 CSS 전환을 위해 setTimeout 기반 JavaScript를 제거하려고합니다. 배경색을 즉시 변경하거나 두 배경색간에 페이드를 변경하는 대신, 먼저 노란색으로 즉시 전환 한 다음 적절한 색으로 희미하게하고 싶습니다.

나는 그것이 작동해야한다고 상상하는 방법은 노란색 배경의 무언가를 클래스로 설정 한 다음 전환 속성과 새 색상이있는 클래스로 변경하는 것입니다. 노란색으로 시작하는 대신 최종 색상으로 페이드 아웃합니다. 클래스에 관계없이 요소에 전환을 첨부 할 수 있다고 생각하지 않거나 두 클래스 변경 내용이 동시에 겹쳐져 애니메이션을 실행합니다.

분명히 나는 ​​이것을 달성하기 위해 다른 방법으로 물건을 구조화해야합니다. 추가 및 제거 된 클래스에 연결될 때 실제로 전환이 발생할 때의 기본 사항을 파악해서는 안됩니다.

<style> 
.highlight { background-color: yellow; } 
.selected { background-color: black; -moz-transition: background-color 2s linear; } 
</style> 

<div id="samp" onclick="flash();">SAMPLE</div> 

<script> 
function flash() { 
    document.getElementById("samp").className = "highlight"; 
    document.getElementById("samp").className = "selected"; 
} 
</script> 

Answer 1

IRC와상의 한 후이 문제의 근본 원인은 다시 그리기/다시 그리기를 시도하기 전에 스크립트 블록이 완료 될 때까지 브라우저가 기다리는 것으로 확인되었습니다. 마치 highlight 클래스가 적용되지 않은 것처럼 보였습니다. 이러한 이유 때문에 타임 아웃이 증가하면 Lea의 솔루션이 실제로 작동합니다. 정확한 타임 아웃은 재 페인트 간격에 달려 있어야합니다.

다시 칠하는 방법을 찾았으며 Opera blog post warning against measuring as it causes a repaint을 발견했습니다. 두 줄 사이에 var x = document.getElementById("samp").offsetWidth;을 삽입하기 만하면 className으로 설정하면 원하는대로 황색에서 전환이 시작됩니다.

흥미로운 점은 CSS가있는 것처럼 조치가 주로 stateless 인 경우 Webkit과 Gecko (스크립트 블록이 완료 될 때까지 다시 그리기를 기다리는)에 의해 최적화 된 것이 합리적이라는 것입니다. 즉, 얼마나 많은 변경이 이루어 졌는지에 관계없이 브라우저는 이전 스타일을 모두 버리고 마지막 스타일을 적용 할 수 있습니다. 그러나 전환과 함께 CSS는 상태가 유지되며이 최적화는 실제로 꺼져있는 경우와 매우 다른 결과를 생성합니다.

Answer 2

당신은 타임 아웃 클래스를 전환해야합니다

function flash() { 
    document.getElementById("samp").className = "highlight"; 

    setTimeout(function(){ 
     document.getElementById("samp").className = "selected"; 
    }, 10); 
} 

또한, 이것은 논외이지만 좋은 연습 변수에 중복 DOM 쿼리 및 캐시 요소를 방지하는 것입니다 :

function flash() { 
    var samp = document.getElementById('samp'); 

    samp.className = "highlight"; 

    setTimeout(function(){ 
     samp.className = "selected"; 
    }, 10); 
}