对于转场，你可以使用下面的方法通过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()方法已弃用，从jQuery 1.7开始首选on()方法。bind ()

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

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

引用:

.off () 。()

对于转场，你可以使用下面的方法通过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()方法已弃用，从jQuery 1.7开始首选on()方法。bind ()

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

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

引用:

.off () 。()

另一个选择是使用jQuery传输框架来处理你的CSS3转换。过渡/效果在移动设备上表现良好，你不必为了做动画效果而在CSS文件中添加一行凌乱的CSS3过渡。

下面是一个例子，当你点击一个元素时，它会将不透明度转换为0，一旦转换完成，它就会被移除:

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

JS小提琴演示

对于任何人来说，这可能是方便的，这是一个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这样的动画库，即使是小动画。

接受的答案目前在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);
        });

这里有一个animationend事件，可以观察到这里的文档， 对于CSS过渡动画，你也可以使用transitionend事件

不需要额外的库，这些库都可以与普通JS一起工作

. getelementbyid(“myDIV”)。addEventListener(“transitionend”,myEndFunction); 函数myEndFunction() { 这一点。innerHTML = "过渡事件结束"; ｝ #myDIV{过渡:top 2s;位置:相对;上图:0;} Div{背景:#ede;光标:指针;填充:20px;} <div id="myDIV" onclick="this.style. "Top = '55px';>点击我开始动画