src/common/js/winjs/js/base.js
function transformWithTransition(element, transition) {
        // transition's properties:
        // - duration: Number representing the duration of the animation in milliseconds.
        // - timing: String representing the CSS timing function that controls the progress of the animation.
        // - to: The value of *element*'s transform property after the animation.
        var duration = transition.duration * _TransitionAnimation._animationFactor;
        var transitionProperty = _BaseUtils._browserStyleEquivalents["transition"].scriptName;
        element.style[transitionProperty] = duration + "ms " + transformNames.cssName + " " + transition.timing;
        element.style[transformNames.scriptName] = transition.to;

        var finish;
        return new Promise(function (c) {
            var onTransitionEnd = function (eventObject) {
                if (eventObject.target === element && eventObject.propertyName === transformNames.cssName) {
                    finish();
                }
            };

            var didFinish = false;
            finish = function () {
                if (!didFinish) {
                    _Global.clearTimeout(timeoutId);
                    element.removeEventListener(_BaseUtils._browserEventEquivalents["transitionEnd"], onTransitionEnd);
                    element.style[transitionProperty] = "";
                    didFinish = true;
                }
                c();
            };

            // Watch dog timeout
            var timeoutId = _Global.setTimeout(function () {
                timeoutId = _Global.setTimeout(finish, duration);
            }, 50);

            element.addEventListener(_BaseUtils._browserEventEquivalents["transitionEnd"], onTransitionEnd);
        }, function () {
            finish(); // On cancelation, complete the promise successfully to match PVL
        });
    }
function transformWithTransition(element, transition) {
        // transition's properties:
        // - duration: Number representing the duration of the animation in milliseconds.
        // - timing: String representing the CSS timing function that controls the progress of the animation.
        // - to: The value of *element*'s transform property after the animation.
        var duration = transition.duration * _TransitionAnimation._animationFactor;
        var transitionProperty = _BaseUtils._browserStyleEquivalents["transition"].scriptName;
        element.style[transitionProperty] = duration + "ms " + transformNames.cssName + " " + transition.timing;
        element.style[transformNames.scriptName] = transition.to;

        var finish;
        return new Promise(function (c) {
            var onTransitionEnd = function (eventObject) {
                if (eventObject.target === element && eventObject.propertyName === transformNames.cssName) {
                    finish();
                }
            };

            var didFinish = false;
            finish = function () {
                if (!didFinish) {
                    _Global.clearTimeout(timeoutId);
                    element.removeEventListener(_BaseUtils._browserEventEquivalents["transitionEnd"], onTransitionEnd);
                    element.style[transitionProperty] = "";
                    didFinish = true;
                }
                c();
            };

            // Watch dog timeout
            var timeoutId = _Global.setTimeout(function () {
                timeoutId = _Global.setTimeout(finish, duration);
            }, 50);

            element.addEventListener(_BaseUtils._browserEventEquivalents["transitionEnd"], onTransitionEnd);
        }, function () {
            finish(); // On cancelation, complete the promise successfully to match PVL
        });
    }
function transformWithTransition ( element , transition ) { // transition's properties: // - duration: Number representing the duration of the animation in milliseconds. // - timing: String representing the CSS timing function that controls the progress of the animation. // - to: The value of *element*'s transform property after the animation. var duration = transition . duration * _TransitionAnimation . _animationFactor ; var transitionProperty = _BaseUtils . _browserStyleEquivalents [ "transition" ] . scriptName ; element . style [ transitionProperty ] = duration + "ms " + transformNames . cssName + " " + transition . timing ; element . style [ transformNames . scriptName ] = transition . to ; var finish ; return new Promise ( function ( c ) { var onTransitionEnd = function ( eventObject ) { if ( eventObject . target === element && eventObject . propertyName === transformNames . cssName ) { finish ( ) ; } } ; var didFinish = false ; finish = function ( ) { if ( ! didFinish ) { _Global . clearTimeout ( timeoutId ) ; element . removeEventListener ( _BaseUtils . _browserEventEquivalents [ "transitionEnd" ] , onTransitionEnd ) ; element . style [ transitionProperty ] = "" ; didFinish = true ; } c ( ) ; } ; // Watch dog timeout var timeoutId = _Global . setTimeout ( function ( ) { timeoutId = _Global . setTimeout ( finish , duration ) ; } , 50 ) ; element . addEventListener ( _BaseUtils . _browserEventEquivalents [ "transitionEnd" ] , onTransitionEnd ) ; } , function ( ) { finish ( ) ; // On cancelation, complete the promise successfully to match PVL } ) ; }
Resize animation The resize animation requires 2 animations to run simultaneously in sync with each other. It's implemented without PVL because PVL doesn't provide a way to guarantee that 2 animations will start at the same time.
Resize animation The resize animation requires 2 animations to run simultaneously in sync with each other . It s implemented without PVL because PVL doesn t provide a way to guarantee that 2 animations will start at the same time .