How to know if animate.css animation is completed with addClass in backbone view?

Question

I'm using animate.css to put some nice effects to my backbone views. One of the animations that I'm using is the flipOutX when a list item is deleted.

Here is my drop function:

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

Knowing that using setTimeout is a really bad idea, do you have any work around to apply this effect? I'm using the setTimeout to be sure the addClass effect is completed before effectively removing the view. Here my problem is the fact that addClass is not asynchronous.

Derek · Answer 1 · 2013-06-19T08:04:04.900

2

Try this:

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

When functions dealing with visual effects (including .css() and .addClass(), .toggleClass(), and .removeClass()) finish, they return a Deferred/Promise object, which will register a completed event that calls a callback (defined by the function in .done()). The jQuery API website goes into more detail but this is the pattern you should use when you need to defer visual events. You can also get into the queue/dequeue system for more direct control of effects.

edited Jun 19 '13 at 08:04

answered Jun 19 '13 at 07:58

Derek

4,575
3
22
36

Surely, the promise will already exist at the time an effect finishes, so would "... they return a Deferred/Promise ..." better read "... they resolve a Deferred/Promise ..."? (Plus associated adjustment of the rest of the sentence). – Beetroot-Beetroot Jun 19 '13 at 08:14
Unfortunately this doesn't work, the view is removed before the animation is animation is executed :( – Michael Jun 19 '13 at 14:03
My understanding is that `promise()`can only be executed on asynchronous function and `addClass` is not async, am I right ? – Michael Jun 19 '13 at 14:04

score 0 · Answer 2 · answered Dec 22 '16 at 11:58

you can do something like, check if animation is finished and then move forward, there are several ways to do it. you can use my below modular functions depending upon one's needs to check if animation or transition is finished.

        /*
         *   @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];
                }
            }
        }

Here is a example http://codepen.io/yoeman/pen/QGPMQz

Hope this helps!

How to know if animate.css animation is completed with addClass in backbone view?

2 Answers2