Modules (181)

AnimationUtils

Description

Utilities for dealing with animations in the UI.

Dependencies

Functions

Private

_detectTransitionEvent

Returns:
string
The supported transitionend event name.
    function _detectTransitionEvent() {
        var event, el = window.document.createElement("fakeelement");

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

        _.forEach(transitions, function (value, key) {
            if (el.style[key] !== undefined) {
                event = value;
            }
        });
        return event;
    }

    var _transitionEvent = _detectTransitionEvent();
Public API

animateUsingClass

Start an animation by adding the given class to the given target. When the animation is complete, removes the class, clears the event handler we attach to watch for the animation to finish, and resolves the returned promise.

target
Element
The DOM node to animate.
animClass
string
The class that applies the animation/transition to the target.
timeoutDuration
optional
number
Time to wait in ms before rejecting promise. Default is 400.
Returns:
$.Promise
A promise that is resolved when the animation completes. Never rejected.
    function animateUsingClass(target, animClass, timeoutDuration) {
        var result  = new $.Deferred(),
            $target = $(target);

        timeoutDuration = timeoutDuration || 400;

        function finish(e) {
            if (e.target === target) {
                result.resolve();
            }
        }

        function cleanup() {
            $target
                .removeClass(animClass)
                .off(_transitionEvent, finish);
        }

        if ($target.is(":hidden")) {
            // Don't do anything if the element is hidden because transitionEnd wouldn't fire
            result.resolve();
        } else {
            // Note that we can't just use $.one() here because we only want to remove
            // the handler when we get the transition end event for the correct target (not
            // a child).
            $target
                .addClass(animClass)
                .on(_transitionEvent, finish);
        }

        // Use timeout in case transition end event is not sent
        return Async.withTimeout(result.promise(), timeoutDuration, true)
            .done(cleanup);
    }

    exports.animateUsingClass = animateUsingClass;
});