如何知道 animate.css 动画是否在主干视图中使用 addClass 完成？答案

【问题标题】：How to know if animate.css animation is completed with addClass in backbone view?如何知道 animate.css 动画是否在主干视图中使用 addClass 完成？
【发布时间】：2023-03-12 13:51:01
【问题描述】：

我正在使用animate.css 为我的主干视图添加一些不错的效果。我使用的动画之一是删除列表项时的flipOutX。

这是我的拖放功能：

drop: function() {
    var that = this;
    this.$el.addClass('animated flipOutX');
    setTimeout(function() {
        that.remove();
    }, 1000);
}

知道使用setTimeout 是一个非常糟糕的主意，你有什么办法可以应用这个效果吗？我使用setTimeout 来确保addClass 效果在有效移除视图之前完成。我的问题是addClass 不是异步的。

【问题讨论】：

标签： jquery backbone.js addclass jquery-deferred animate.css

【解决方案1】：

试试这个：

this.$el.addClass('animated flipOutX').promise().done(function() { $(this).remove(); });

当处理视觉效果的函数（包括 .css() 和 .addClass()、.toggleClass() 和 .removeClass()）完成时，它们返回一个 Deferred/Promise 对象，该对象将注册一个调用回调（由 .done() 中的函数定义）。 jQuery API 网站有更详细的介绍，但当您需要延迟视觉事件时，这是您应该使用的模式。您还可以进入队列/出队系统以更直接地控制效果。

【讨论】：

当然，承诺在效果完成时已经存在，所以“......他们返回延迟/承诺......”更好地阅读“......他们解决了延迟/承诺……”？（加上句子其余部分的相关调整）。
不幸的是，这不起作用，视图在动画执行之前被删除:(
我的理解是promise()只能在异步函数上执行，addClass不是异步的，对吗？

【解决方案2】：

你可以做一些事情，检查动画是否完成然后继续前进，有几种方法可以做到这一点。您可以根据需要使用我的以下模块化功能来检查动画或过渡是否完成。

        /*
         *   @support check if animation is finished
         */
    var whichAnimationEvent = function whichAnimationEvent() {
            var t,
                el = document.createElement("fakeelement");

            var animations = {
                "animation": "animationend",
                "OAnimation": "oAnimationEnd",
                "MozAnimation": "animationend",
                "WebkitAnimation": "webkitAnimationEnd"
            }

            for (t in animations) {
                if (el.style[t] !== undefined) {
                    return animations[t];
                }
            }
        }
        /*
         *   @support check if transition is finished
         */
    var whichTransitionEvent = function whichTransitionEvent() {
            var t,
                el = document.createElement("fakeelement");

            var transitions = {
                "transition": "transitionend",
                "OTransition": "oTransitionEnd",
                "MozTransition": "transitionend",
                "WebkitTransition": "webkitTransitionEnd"
            }

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

这是一个例子http://codepen.io/yoeman/pen/QGPMQz

希望这会有所帮助！

【讨论】：