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

对于转场，你可以使用下面的方法通过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的one()，我发现这个模式很方便:

function awaitTransitionEnd(transitionProperty, el, triggerFunction) {
    return new Promise((resolve, reject) => {
        const handler = (e) => {
            if (e.propertyName !== transitionProperty) {
                return;
            }
            el.removeEventListener('transitionend', handler);
            resolve(e);
        }
        el.addEventListener('transitionend', handler);
        triggerFunction(el);
    });
}

然后你可以像下面这个例子一样链接CSS转换:

awaitTransitionEnd(
    'background-color', myEl, () => myEl.classList.replace('bg-red', 'bg-green')
).then(() => awaitTransitionEnd(
    'opacity', myEl, () => myEl.classList.add('opacity-0')
)).then(() => awaitTransitionEnd(
    'opacity', myEl, () => myEl.classList.remove('opacity-0')
));

如果你不想使用箭头函数，你必须像这样传递event +元素:

awaitTransitionEnd('background-color', myEl, function(el) {
    el.classList.replace('bg-red', 'bg-green');
}).then(function(e) {
    return awaitTransitionEnd('opacity', e.target, function(el) {
        el.classList.add('opacity-0');
    });  
}).then(function(e) {
    return awaitTransitionEnd('opacity', e.target, function(el) {
        el.classList.remove('opacity-0');
    });
});

当awaitTransitionEnd是一个类方法，而你不想使用箭头函数时，你必须将它绑定到每个then()闭包:

//[...]
.then(function(e) {
    return this.awaitTransitionEnd('opacity', e.target, function(el) {
        el.classList.add('opacity-0');
    });  
}.bind(this)).then(//[...]

对于任何人来说，这可能是方便的，这是一个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);
        });