0

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

这是我的拖放功能：

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

知道使用setTimeout是一个非常糟糕的主意，您是否有任何解决方法来应用此效果？我使用setTimeout来确保addClass在有效移除视图之前完成效果。这里我的问题是addClass不是异步的。

4

2 回答 2

2

尝试这个：

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

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

于 2013-06-19T07:58:28.407 回答
0

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

        /*
         *   @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

希望这可以帮助！

于 2016-12-22T11:58:07.450 回答