Question

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

在jQuery中，这是直截了当的，因为您可以在动画完成后指定“删除”。但是，如果我希望使用CSS3过渡动画，那么无论如何都要知道过渡/动画何时完成？

Answer 1

对于转换，您可以使用以下方法通过jQuery检测转换的结束：

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

Mozilla有一个很好的参考：

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#Detecting_the_start_and_completion_of_a_transition

对于动画，它非常相似：

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

请注意，您可以同时将所有浏览器前缀事件字符串传递到bind（）方法，以支持在支持它的所有浏览器上触发事件。

<强>更新

根据Duck留下的评论：你使用jQuery的.one()方法来确保处理程序只触发一次。例如：

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

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

更新2：

jQuery bind()方法已被弃用，on()方法自jQuery 1.7起首选。 bind()

您还可以在回调函数上使用off()方法，以确保它只会被触发一次。这是一个相当于使用one()方法的示例：

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

参考文献：

Answer 2

另一种选择是使用 jQuery Transit Framework 来处理CSS3过渡。转换/效果在移动设备上表现良好，您不必在CSS文件中添加一行杂乱的CSS3过渡，以便执行动画效果。

这是一个示例，当您单击它时将元素的不透明度转换为0，并在转换完成后将其删除：

$("#element").click( function () {
    $('#element').transition({ opacity: 0 }, function () { $(this).remove(); });
});

JS Fiddle Demo

Answer 3

对于这个可能很方便的人来说，这里有一个jQuery依赖函数，我成功地通过CSS类应用CSS动画，然后从后面获得回调。它可能无法正常工作，因为我在Backbone.js应用程序中使用它，但可能很有用。

var cssAnimate = function(cssClass, callback) {
    var self = this;

    // Checks if correct animation has ended
    var setAnimationListener = function() {
        self.one(
            "webkitAnimationEnd oanimationend msAnimationEnd animationend",
            function(e) {
                if(
                    e.originalEvent.animationName == cssClass &&
                    e.target === e.currentTarget
                ) {
                    callback();
                } else {
                    setAnimationListener();
                }
            }
        );
    }

    self.addClass(cssClass);
    setAnimationListener();
}

我用它有点像这样

cssAnimate.call($("#something"), "fadeIn", function() {
    console.log("Animation is complete");
    // Remove animation class name?
});

来自http://mikefowler.me/2013/11/18/page-transitions-in-backbone/

的原创想法

这看起来很方便：http://api.jqueryui.com/addClass/

<强>更新

在努力学习上述代码和其他选项之后，我建议对任何侦听CSS动画结束都非常谨慎。随着多个动画的继续，这对于事件收听来说会非常快。对于每个动画，我强烈建议使用像GSAP这样的动画库，甚至是小动画。

Answer 4

目前已接受的答案会针对Chrome中的动画触发两次。大概是因为它识别webkitAnimationEnd以及animationEnd。以下肯定只会触发一次：

/* From Modernizr */
function whichTransitionEvent(){

    var el = document.createElement('fakeelement');
    var transitions = {
        'animation':'animationend',
        'OAnimation':'oAnimationEnd',
        'MSAnimation':'MSAnimationEnd',
        'WebkitAnimation':'webkitAnimationEnd'
    };

    for(var t in transitions){
        if( transitions.hasOwnProperty(t) && el.style[t] !== undefined ){
            return transitions[t];
        }
    }
}

$("#elementToListenTo")
    .on(whichTransitionEvent(),
        function(e){
            console.log('Transition complete!  This is the callback!');
            $(this).off(e);
        });

Answer 5

有一个animationend事件，可以观察到，请参见文档here，同样对于CSS transition动画，您可以使用transitionend事件

document.getElementById("myDIV").addEventListener("transitionend", myEndFunction);
function myEndFunction() {
	this.innerHTML = "transition event ended";
}

#myDIV {transition: top 2s; position: relative; top: 0;}

<div id="myDIV" onclick="this.style.top = '55px';">Click me to start animation.</div>

CSS3转换完成后回调

5 个答案: