如何知道如果animation .css动画完成与addClass在骨干视图

Question

我使用animate.css为我的骨干视图添加一些不错的效果。我使用的其中一个动画是当列表项被删除时的flipOutX。

下面是我的drop函数:

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

知道使用setTimeout是一个非常糟糕的主意，你有任何工作来应用这个效果吗?我使用setTimeout来确保在有效删除视图之前完成addClass效果。这里我的问题是addClass不是异步的。

Answer 1

试试这个:

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

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

Answer 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

希望这对你有帮助!