CSS3转换完成时的回调 [英] Callback when CSS3 transition finishes

问题描述

我想淡出一个元素（将其不透明度转换为0），然后从DOM中移除元素。

在jQuery中，因为你可以指定删除发生在动画完成后。但是如果我想使用CSS3转换动画，那么无论如何要知道转换/动画何时完成了？

解决方案

可以使用以下方法通过jQuery检测到转换的结束：

  $（＃someSelector）。bind webkitTransitionEnd oTransitionEnd MSTransitionEnd，function（）{...}）; 
  

Mozilla有一个很好的参考：

https://developer.mozilla.org/en/CSS/CSS_transitions#Detecting_the_completion_of_a_transition

动画类似：

  $（＃someSelector ）.bind（animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd，function（）{...}）;请注意，您可以将所有的浏览器前缀事件字符串同时传递到bind（）方法中，以支持这些操作：
  

$ b <

Duck留下的注释：你使用jQuery的 .one（）方法来确保处理程序只触发一次。例如：

  $（＃someSelector）。one（transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd，function（）{.. 。}）; 
 
 $（＃someSelector）。one（animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd，function（）{...}）; 
  

更新2：

jQuery bind（）方法已被弃用， on（） c $ c> jQuery 1.7 。 bind（）

您还可以在回调函数上使用 off（）方法，以确保它只被触发一次。下面是一个等效于使用 one（）方法的示例：

  $（＃someSelector）
 .on（animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd，
 function（e）{
 // do something here 
 $（this）.off （e）; 
}）; 
  

参考文献：

• .off（）




• 。 one（）

I'd like to fade out an element (transitioning its opacity to 0) and then when finished remove the element from the DOM.

In jQuery this is straight forward since you can specify the "Remove" to happen after an animation completes. But if I wish to animate using CSS3 transitions is there anyway to know when the transition/animation has completed?

解决方案

For transitions you can use the following to detect the end of a transition via jQuery:

$("#someSelector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });

Mozilla has an excellent reference:

https://developer.mozilla.org/en/CSS/CSS_transitions#Detecting_the_completion_of_a_transition

For animations it's very similar:

$("#someSelector").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });

Note that you can pass all of the browser prefixed event strings into the bind() method simultaneously to support the event firing on all browsers that support it.

Update:

Per the comment left by Duck: you use jQuery's .one() method to ensure the handler only fires once. For example:

$("#someSelector").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });

$("#someSelector").one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });

Update 2:

jQuery bind() method has been deprecated, and on() method is preferred as of jQuery 1.7. bind()

You can also use off() method on the callback function to ensure it will be fired only once. Here is an example which is equivalent to using one() method:

$("#someSelector")
.on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",
 function(e){
    // do something here
    $(this).off(e);
 });

References:

• .off()

• .one()

这篇关于CSS3转换完成时的回调的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！