CSS 전환에 대한 콜백

CSS 전환이 완료되면 알림 (예 : 콜백)을받을 수 있습니까?

Safari 가 전환을 통해 요소에 직접 연결할 수 있는 webkitTransitionEnd 콜백을 구현한다는 것을 알고 있습니다.

그들의 예 (여러 줄로 재 형식화 됨) :

box.addEventListener( 
     'webkitTransitionEnd', 
     function( event ) { 
         alert( "Finished transition!" ); 
     }, false );

예, 브라우저에서 이러한 기능을 지원하는 경우 전환이 완료 될 때 이벤트가 트리거됩니다. 그러나 실제 이벤트는 브라우저마다 다릅니다.

• Webkit 브라우저 (Chrome, Safari) 사용 webkitTransitionEnd
• Firefox 사용 transitionend
• IE9 + 사용 msTransitionEnd
• 오페라 사용 oTransitionEnd

그러나 webkitTransitionEnd항상 발사 되는 것은 아닙니다! 이것은 나를 여러 번 붙잡 았으며 애니메이션이 요소에 영향을 미치지 않으면 발생하는 것 같습니다. 이 문제를 해결하려면 예상대로 트리거되지 않은 경우 타임 아웃을 사용하여 이벤트 핸들러를 실행하는 것이 좋습니다. 이 문제에 대한 블로그 게시물은 http://www.cuppadev.co.uk/the-trouble-with-css-transitions/ <-500 내부 서버 오류입니다.

이를 염두에두고 저는이 이벤트를 다음과 같은 코드 덩어리에서 사용하는 경향이 있습니다.

var transitionEndEventName = "XXX"; //figure out, e.g. "webkitTransitionEnd".. 
var elemToAnimate = ... //the thing you want to animate..
var done = false;
var transitionEnded = function(){
     done = true;
     //do your transition finished stuff..
     elemToAnimate.removeEventListener(transitionEndEventName,
                                        transitionEnded, false);
};
elemToAnimate.addEventListener(transitionEndEventName,
                                transitionEnded, false);

//animation triggering code here..

//ensure tidy up if event doesn't fire..
setTimeout(function(){
    if(!done){
        console.log("timeout needed to call transition ended..");
        transitionEnded();
    }
}, XXX); //note: XXX should be the time required for the
        //animation to complete plus a grace period (e.g. 10ms) 

참고 : 전환 이벤트 종료 이름을 얻으려면 다음의 답변으로 게시 된 방법을 사용할 수 있습니다. 브라우저에서 CSS3 전환 기능을 정규화하는 방법은 무엇입니까? .

참고 :이 질문은 다음과도 관련이 있습니다.- CSS3 전환 이벤트

다음 코드를 사용하고 있으며 브라우저가 사용하는 특정 종료 이벤트를 감지하는 것보다 훨씬 간단합니다.

$(".myClass").one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', 
function() {
 //do something
});

또는 부트 스트랩을 사용하는 경우 다음을 수행 할 수 있습니다.

$(".myClass").one($.support.transition.end,
function() {
 //do something
});

이것은 bootstrap.js에 다음을 포함하기 때문입니다.

+function ($) {
  'use strict';

  // CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
  // ============================================================

  function transitionEnd() {
    var el = document.createElement('bootstrap')

    var transEndEventNames = {
      'WebkitTransition' : 'webkitTransitionEnd',
      'MozTransition'    : 'transitionend',
      'OTransition'      : 'oTransitionEnd otransitionend',
      'transition'       : 'transitionend'
    }

    for (var name in transEndEventNames) {
      if (el.style[name] !== undefined) {
        return { end: transEndEventNames[name] }
      }
    }

    return false // explicit for ie8 (  ._.)
  }

  // http://blog.alexmaccaw.com/css-transitions
  $.fn.emulateTransitionEnd = function (duration) {
    var called = false, $el = this
    $(this).one($.support.transition.end, function () { called = true })
    var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
    setTimeout(callback, duration)
    return this
  }

  $(function () {
    $.support.transition = transitionEnd()
  })

}(jQuery);

jQuery.transit 플러그인 , CSS3 변환 및 전환을위한 플러그인, 스크립트에서 CSS 애니메이션을 호출하고 당신에게 콜백을 제공 할 수 있습니다.

이것은 transitionend이벤트를 통해 쉽게 달성 할 수 있습니다. 여기 문서를 참조 하십시오 . 간단한 예 :

document.getElementById("button").addEventListener("transitionend", myEndFunction);

function myEndFunction() {
	this.innerHTML = "Transition event ended";
}

#button {transition: top 2s; position: relative; top: 0;}

<button id="button" onclick="this.style.top = '55px';">Click me to start animation</button>