CSS3 过渡事件

Question

元素是否会触发任何事件来检查 css3 转换是否已开始或结束？

Answer 1

W3C CSS 过渡草案

CSS Transition 的完成会生成相应的 DOM 事件。为每个经历转换的属性触发一个事件。这允许内容开发人员执行与转换完成同步的操作。

---

Webkit

要确定转换何时完成，请为转换结束时发送的 DOM 事件设置 JavaScript 事件侦听器函数。该事件是WebKitTransitionEvent的一个实例，其类型为webkitTransitionEnd。

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

Mozilla

转换完成时会触发一个事件。在 Firefox 中，事件为 transitionend，在 Opera 中为 oTransitionEnd，在 WebKit 中为 webkitTransitionEnd。

歌剧

有一种类型的转换事件
可用的。 oTransitionEnd 事件
发生在完成时
过渡。

Internet Explorer

transitionend 事件在转换完成时发生。如果在完成之前移除过渡，则该事件将不会触发。

---

Stack Overflow：如何跨浏览器标准化 CSS3 转换函数？< /a>

Answer 2

更新

所有现代浏览器现在都支持无前缀事件：

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

https://caniuse.com/#feat=css-transitions

---

我正在使用 Pete 给出的方法，但是我现在开始使用以下

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

---

替代方法你使用 bootstrap 那么你可以简单地这样做

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

请注意，它们还包含一个 emulateTransitionEnd 函数，可能需要该函数来确保回调始终发生。

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

Answer 3

所有现代浏览器现在都支持无前缀事件：

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

适用于最新版本的 Chrome、Firefox 和 Safari。即使是IE10+。

Answer 4

在 Opera 12 中，当您使用纯 JavaScript 进行绑定时，“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/

Answer 5

只是为了好玩，不要这样做！

$.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');
});

Answer 6

如果您只想检测单个转换结束，而不使用任何 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();

对于其他事件用法也有好处： ）