JavaScript 또는 jQuery의 경우 transitionend 이벤트를 발생시키지 않는 방법은 무엇입니까? 링크에서

Question

는 :

참고 : 전환이 중단되면 생기 속성의 값이 전환되기 전에 변경되기 때문에 transitionend 이벤트가 발생하지 않습니다

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

이 있다고한다 완성 됐습니다.

크롬과 Firefox를 사용하여 http://jsfiddle.net/HA8s2/32/과 http://jsfiddle.net/HA8s2/33/에서 시도했습니다.

예 :

transition-duration: 6s; 

그러나 둘 다 애니메이션을 계속 : (jsfiddle에서 왼쪽 또는 오른쪽 상자 중 하나를 클릭)

$(".foo").click(function(evt) { 
    $(".foo").addClass("hide"); 
    setTimeout(function() { 
     $(".foo").eq(0).removeClass("hide"); 
    }, 3000); 
}); 

$(".foo").on("transitionend", function(evt) { 
    console.log("wow! transitionend fired for", evt.target, "at time =", (new Date()).getTime()/1000); 
}); 

이 육초에 대한 CSS 전환의 지속 시간이다. 왼쪽 상자는 실제로 "원래 애니메이션의 중간에 새로운 값으로 애니메이션"하므로 왼쪽에는 9 초가 걸렸고 오른쪽 상자에는 6 초가 걸렸습니다.

또한 Firefox는 http://jsfiddle.net/HA8s2/32/의 두 이벤트를 3 초가 아닌 2 초로 구분합니다.

질문 : mozilla.org의 문서에 설명 된대로 종점 중단을 수행하려면 어떻게해야합니까? (그리고 다른 무차별 대입 방식에 의해서가 아니라).

(즉, transitionend이 발생시키지 않는 모든 상황을 찾고 싶습니다.)

업데이트 :는 내가 왼쪽에있는 상자에 display: none를 추가하는 경우 http://jsfiddle.net/HA8s2/34/에로, 애니메이션을 중단 할 수 있었다 그것은 http://jsfiddle.net/HA8s2/35/ 같이 visibility: hidden하지만이 정말하지 않는 경우를 중단 할 수 없습니다 문서가 말하는 것처럼 속성의 값을 "변경"- 또 다른 속성 값을 추가하거나 변경하는 것입니다.

Answer 1

전환 속성을 덮어 쓰는 새로운 클래스를 제공하지 않을 수 있습니까?

.myelem { transition: 0.5s all; } 

당신은이 코드를 추가합니다 :

현재 코드처럼 당신이 당신의 요소에 alsothis 클래스를 적용 할 때,

.alsothis { transition: none; } 

을 새로운 transition 속성 값 것이다 재정 다른 하나는 애니메이션 효과를 제거합니다.