CSS3过渡事件

Question

是否有任何事件由一个元素触发来检查css3转换是否已经开始或结束？

Answer 1

W3C CSS Transitions Draft

完成CSS Transition会生成相应的DOM事件.每个经历过渡的属性都会触发一个事件.这允许内容开发者执行与转换完成同步的动作.

WebKit的

您可以为在转换结束时发送的DOM事件设置处理程序.该事件是WebKitTransitionEvent的一个实例,其类型是JavaScript中的webKitTransitionEnd.

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

Mozilla的

转换完成时会触发一个事件.在Firefox中,事件是webkitTransitionEnd在Opera中transitionend,而在WebKit中则是oTransitionEnd.

歌剧

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

IE浏览器

该oTransitionEnd事件发生在转换完成时.如果在完成之前移除了转换,则不会触发该事件.

那么:我如何规范浏览器中的CSS3 Transition功能？

Answer 2

我正在使用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');
});