애니메이션 전의 CSS 전환 발생

Question

스타일을 변경 한 요소가 있습니다 (클래스 변경 또는 스타일 수정을 통해).

그런 다음 나중에 변경 사항이 애니메이션으로 적용되도록 전환을 추가하고 싶습니다.

전이 전에 스타일을 설정할 때 스타일이 여전히 애니메이션으로 표시됩니다. 이것은 Firefox, Chrome, Safari의 최신 버전에서 발생합니다.

예 : http://codepen.io/DavidBradbury/pen/IxfmF

JS 코드 단편 [라이브러리 jQuery를하지만, 그건 문제가 안] :

setTimeout(function() { $("#badidname").css({ "transition": "all 600ms" }); }, 0); 

:

$(function() { 
    $("#toggle").on({ 
    click: function(e) { 
     // ## Change the class/style 
     // At this point, it shouldn't know that 
     // a transition will be added 
     $("#badidname").toggleClass('newclass'); 

     // Then add the transition 
     $("#badidname").css({ 
     "transition": "all 600ms" 
     }); 

     // For some reason, it animates 
     // the class being added 
    } 
    }) 
}) 

Answer 1

당신은 타임 아웃의 전환을 포장 할 필요가 이상한 것 이상의 좋은 설명은 setTimeout(..., 0);setTimeout with zero delay used often in web pages, why?