Javascript CSS3转换事件

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

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

---

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

WebKittTransitionEnd

转换完成时会触发一个事件。在Firefox中，事件是

transitionend

，在Opera中是

otransionEnd

，在WebKit中是

WebKittransionEnd

有一种类型的转换事件 可用。

otransionend

事件 在完成任务时发生 过渡

transitionend

事件发生在转换完成时。如果在完成之前删除了转换，则不会触发事件

---

---

在Opera 12中，当您使用普通JavaScript进行绑定时，“oTransitionEnd”将起作用：

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

但是，如果通过jQuery绑定，则需要使用“otransitionend”

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

如果您使用的是Modernizer或bootstrap-transition.js，您只需做一个更改：

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

---

您也可以在这里找到一些信息

更新

所有现代浏览器现在都支持不固定事件：

element.addEventListener（'transitionend'，回调，false）



我使用的是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);

注意，它们还包括一个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
  }

请注意，有时此事件不会触发，通常在这种情况下
属性未更改或未触发绘制时。为了确保我们
总是得到一个回调，让我们设置一个触发事件的超时
手动

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

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

所有现代浏览器都会显示未修复的事件：

element.addEventListener（'transitionend'，回调，false）

适用于最新版本的Chrome、Firefox和Safari。即使是IE10+。
如果您只想检测单个转换端，而不使用任何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();

这对其他事件的使用也有好处：）
注意，该事件在firefox中被称为“transitionend”，在OperaNo中被称为“oTransitionEnd”。one已经提到了关于问题的过渡开始部分的任何内容。在转换开始之前，是否没有办法注册要触发的事件处理程序？现在是否有标准的方法来实现这一点？看来2年是很长的时间了！事情可能已经发生了变化。@tyler我不知道如何解决缺少转换的问题。@Timmer Fuzz-linked stackoverflow问题有一个有趣的解决方案。你不能这样做。在某些情况下，callbaack将被多次触发。在保留前缀和常规事件名称的浏览器中。您可以通过使用.one而不是.onJust来解决这个问题：第一个解决方案看起来很好，也很方便，但它会导致内存泄漏：为了避免这种情况，请命名所有事件名称的名称空间，并显式取消注册它们。否则，每次执行代码时都会添加一堆事件监听器，而这些监听器永远不会被清理$（“.myClass”）.one（'transitionend.namespace WebKittTransitionEnd.namespace OrtTransitionEnd.namespace OrtTransitionEnd.namespace MSTransitionEnd.namespace'，function（）{$（this）.off（'.namespace'）；//do something}）；
handler.cancel();