CSS3 전환 이벤트

CSS3 전환 이벤트

CSS3 전환이 시작되었는지 종료되었는지 확인하기 위해 요소에 의해 실행된 이벤트가 있습니까?

W3C CSS 전환 초안

CSS 전환이 완료되면 해당 DOM 이벤트가 생성됩니다.전환을 수행하는 각 속성에 대해 이벤트가 발생합니다.이를 통해 콘텐츠 개발자는 전환 완료와 동기화되는 작업을 수행할 수 있습니다.

---

웹킷

전환이 완료되는 시기를 확인하려면 전환 종료 시 전송되는 DOM 이벤트에 대해 JavaScript 이벤트 수신기 기능을 설정합니다.이벤트는 WebKitTransitionEvent의 인스턴스이며, 그 유형은 다음과 같습니다.webkitTransitionEnd.

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

모질라

전환이 완료되면 실행되는 단일 이벤트가 있습니다.파이어폭스에서 이벤트는transitionend오페라에서,oTransitionEnd그리고 WebKit에서 그것은webkitTransitionEnd.

오페라

한 가지 유형의 전환 이벤트를 사용할 수 있습니다.oTransitionEnd이벤트는 전환이 완료될 때 발생합니다.

인터넷 익스플로러

그transitionend이벤트는 전환이 완료될 때 발생합니다.완료하기 전에 전환이 제거되면 이벤트가 실행되지 않습니다.

---

스택 오버플로:브라우저 간 CSS3 전환 기능을 정상화하려면 어떻게 해야 합니까?

갱신하다

모든 최신 브라우저는 이제 고정되지 않은 이벤트를 지원합니다.

element.addEventListener('transitionend', callback, false);

https://caniuse.com/ #http=http-transitions

---

Pete가 제공한 접근 방식을 사용하고 있었지만, 이제 다음을 사용하기 시작했습니다.

$(".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 (  ._.)
  }


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

}(jQuery);

또한 항상 콜백이 발생하도록 보장하기 위해 필요할 수 있는 에뮬레이트 전환 종료 기능도 포함되어 있습니다.

  // 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
  }

대개 속성이 변경되지 않거나 페인트가 트리거되지 않은 경우 이 이벤트가 실행되지 않을 수 있습니다.항상 콜백을 받을 수 있도록 이벤트를 수동으로 트리거하는 시간 제한을 설정합니다.

http://blog.alexmaccaw.com/css-transitions

모든 최신 브라우저는 이제 고정되지 않은 이벤트를 지원합니다.

element.addEventListener('transitionend', callback, false);

최신 버전의 Chrome, Firefox 및 Safari에서 작동합니다.심지어 IE10+.

오페라 12에서 플레인 자바스크립트를 사용하여 바인딩하면 'oTransitionEnd'가 작동합니다.

document.addEventListener("oTransitionEnd", function(){
    alert("Transition Ended");
});

그러나 jQuery를 통해 바인딩하는 경우 'otransitionend'를 사용해야 합니다.

$(document).bind("otransitionend", function(){
    alert("Transition Ended");
});

Modernizr 또는 bootstrap-transition.js를 사용하는 경우 간단히 변경할 수 있습니다.

var transEndEventNames = {
    'WebkitTransition' : 'webkitTransitionEnd',
    'MozTransition'    : 'transitionend',
    'OTransition'      : 'oTransitionEnd otransitionend',
    'msTransition'     : 'MSTransitionEnd',
    'transition'       : 'transitionend'
},
transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ];

http://www.ianlunn.co.uk/blog/articles/opera-12-otransitionend-bugs-and-workarounds/ 에서도 몇 가지 정보를 찾을 수 있습니다.

그냥 재미로, 이러지 마!

$.fn.transitiondone = function () {
  return this.each(function () {
    var $this = $(this);
    setTimeout(function () {
      $this.trigger('transitiondone');
    }, (parseFloat($this.css('transitionDelay')) + parseFloat($this.css('transitionDuration'))) * 1000);
  });
};


$('div').on('mousedown', function (e) {
  $(this).addClass('bounce').transitiondone();
});

$('div').on('transitiondone', function () {
  $(this).removeClass('bounce');
});

JS 프레임워크를 사용하지 않고 단 하나의 전환 종료만 감지하려면 여기에 약간 편리한 유틸리티 기능이 있습니다.

function once = function(object,event,callback){
    var handle={};

    var eventNames=event.split(" ");

    var cbWrapper=function(){
        eventNames.forEach(function(e){
            object.removeEventListener(e,cbWrapper, false );
        });
        callback.apply(this,arguments);
    };

    eventNames.forEach(function(e){
        object.addEventListener(e,cbWrapper,false);
    });

    handle.cancel=function(){
        eventNames.forEach(function(e){
            object.removeEventListener(e,cbWrapper, false );
        });
    };

    return handle;
};

용도:

var handler = once(document.querySelector('#myElement'), 'transitionend', function(){
   //do something
});

그렇다면 당신이 어느 시점에서 취소하기를 원한다면 당신은 여전히 그것을 할 수 있습니다.

handler.cancel();

다른 이벤트 용도로도 좋습니다 :)

언급URL : https://stackoverflow.com/questions/2794148/css3-transition-events