Javascript CSS3 过渡事件

CSS3 transition events

提问by Andreas K?berle

Are there any events fired by an element to check wether a css3 transition has started or end?

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

回答by Davor Lucic

W3C CSS Transitions Draft

W3C CSS 过渡草案

The completion of a CSS Transition generates a corresponding DOM Event. An event is fired for each property that undergoes a transition. This allows a content developer to perform actions that synchronize with the completion of a transition.

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

---

---

Webkit

网络套件

To determine when a transition completes, set a JavaScript event listener function for the DOM event that is sent at the end of a transition. The event is an instance of WebKitTransitionEvent, and its type is webkitTransitionEnd.

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

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

Mozilla

Mozilla

There is a single event that is fired when transitions complete. In Firefox, the event is transitionend, in Opera, oTransitionEnd, and in WebKit it is webkitTransitionEnd.

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

Opera

歌剧

There is one type of transition event available. The oTransitionEndevent occurs at the completion of the transition.

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

Internet Explorer

IE浏览器

The transitionendevent occurs at the completion of the transition. If the transition is removed before completion, the event will not fire.

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

---

---

Stack Overflow: How do I normalize CSS3 Transition functions across browsers?

Stack Overflow：如何规范跨浏览器的 CSS3 过渡功能？

回答by Tom

Update

更新

All modern browsers now support the unprefixed event:

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

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

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

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

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

---

---

I was using the approach given by Pete, however I have now started using the following

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

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

---

---

Alternatively if you use bootstrap then you can simply do

或者，如果您使用引导程序，那么您可以简单地执行

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

This is becuase they include the following in bootstrap.js

这是因为它们在 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);

Note they also include an emulateTransitionEnd function which may be needed to ensure a callback always occurs.

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

Be aware that sometimes this event doesn't fire, usually in the case when properties don't change or a paint isn't triggered. To ensure we always get a callback, let's set a timeout that'll trigger the event manually.

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

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

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

回答by neave

All modern browsers now supportthe unprefixed event:

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

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

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

Works in the latest versions of Chrome, Firefox and Safari. Even IE10+.

适用于最新版本的 Chrome、Firefox 和 Safari。甚至IE10+。

回答by Peter

In Opera 12 when you bind using the plain JavaScript, 'oTransitionEnd' will work:

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

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

however if you bind through jQuery, you need to use 'otransitionend'

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

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

In case you are using Modernizr or bootstrap-transition.js you can simply do a change:

如果您使用的是 Modernizr 或 bootstrap-transition.js，您可以简单地进行更改：

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

You can find some info here as well http://www.ianlunn.co.uk/blog/articles/opera-12-otransitionend-bugs-and-workarounds/

你也可以在这里找到一些信息http://www.ianlunn.co.uk/blog/articles/opera-12-otransitionend-bugs-and-workarounds/

回答by yckart

Just for fun, don't do 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');
});

回答by OpherV

If you simply want to detect only a single transition end, without using any JS framework here's a little convenient utility function:

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

Usage:

用法：

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

then if you wish to cancel at some point you can still do it with

那么如果你想在某个时候取消你仍然可以这样做

handler.cancel();

It's good for other event usages as well :)

它也适用于其他事件用法:)