Durandal Transition Complete

entrance-notify.js

/**
 * The entrance transition module.
 * @module entrance
 * @requires system
 * @requires composition
 * @requires jquery
 */
define(['durandal/system', 'durandal/composition', 'jquery'], function(system, composition, $) {
    var fadeOutDuration = 100;
    var endValues = {
        marginRight: 0,
        marginLeft: 0,
        opacity: 1
    };
    var clearValues = {
        marginLeft: '',
        marginRight: '',
        opacity: '',
        display: ''
    };

    /**
     * @class EntranceModule
     * @constructor
     */
    var entrance = function(context) {
        return system.defer(function(dfd) {
            function endTransition() {
                context.model.transitionComplete && context.model.transitionComplete(context.child, context.parent);
                dfd.resolve();
            }

            function scrollIfNeeded() {
                if (!context.keepScrollPosition) {
                    $(document).scrollTop(0);
                }
            }

            if (!context.child) {
                $(context.activeView).fadeOut(fadeOutDuration, endTransition);
            } else {
                var duration = context.duration || 500;
                var fadeOnly = !!context.fadeOnly;

                function startTransition() {
                    scrollIfNeeded();
                    context.triggerAttach();

                    var startValues = {
                        marginLeft: fadeOnly ? '0' : '20px',
                        marginRight: fadeOnly ? '0' : '-20px',
                        opacity: 0,
                        display: 'block'
                    };

                    var $child = $(context.child);

                    var animate = function() {
                        $child.animate(endValues, {
                            duration: duration,
                            easing: 'swing',
                            always: function () {
                                $child.css(clearValues);
                                endTransition();
                            }
                        });
                    };

                    $child.css(startValues);
                    var promise = context.model.transitionStart && context.model.transitionStart(context.child, context.parent);
                    if (promise && promise.then)
                        promise.then(function() {
                            animate();
                        });
                    else
                        animate();
                }

                if (context.activeView) {
                    $(context.activeView).fadeOut({ duration: fadeOutDuration, always: startTransition });
                } else {
                    startTransition();
                }
            }
        }).promise();
    };

    return entrance;
});