continuumForwardIn: function()

in Canvas/CanvasSimple/lib/winjs-4.0.1/js/base.js [17959:18033]


        continuumForwardIn: function (incomingPage, incomingItemRoot, incomingItemContent) {
            /// <signature helpKeyword="WinJS.UI.Animation.continuumForwardIn">
            /// <summary locid="WinJS.UI.Animation.continuumForwardIn">
            /// Execute a continuum animation, scaling up the incoming page while scaling, rotating, and translating the incoming item.
            /// </summary>
            /// <param name="incomingPage" locid="WinJS.UI.Animation.continuumForwardIn_p:incomingPage">
            /// Single element to be scaled up that is the page root and does not contain the incoming item.
            /// </param>
            /// <param name="incomingItemRoot" locid="WinJS.UI.Animation.continuumForwardIn_p:incomingItemRoot">
            /// Root of the item that will be translated as part of the continuum animation.
            /// </param>
            /// <param name="incomingItemContent" locid="WinJS.UI.Animation.continuumForwardIn_p:incomingItemContent">
            /// Content of the item that will be scaled and rotated as part of the continuum animation.
            /// </param>
            /// <returns type="WinJS.Promise" locid="WinJS.UI.Animation.continuumForwardIn_returnValue">
            /// Promise object that completes when the animation is complete.
            /// </returns>
            /// </signature>
            writeAnimationProfilerMark("continuumForwardIn,StartTM");

            return Promise.join([
                _TransitionAnimation.executeTransition(incomingPage,
                [{
                    property: transformNames.cssName,
                    delay: 0,
                    duration: 350,
                    timing: "cubic-bezier(0.33, 0.18, 0.11, 1)",
                    from: "scale(0.5, 0.5)",
                    to: "scale(1.0, 1.0)"
                },
                {
                    property: "opacity",
                    delay: 0,
                    duration: 350,
                    timing: "cubic-bezier(0, 2, 0, 2)",
                    from: 0,
                    to: 1,
                }]),
                _TransitionAnimation.executeTransition(incomingItemRoot,
                [{
                    property: transformNames.cssName,
                    delay: 0,
                    duration: 350,
                    timing: "cubic-bezier(0.24,1.15,0.11,1.1575)",
                    from: "translate(0px, 225px)",
                    to: "translate(0px, 0px)"
                },
                {
                    property: "opacity",
                    delay: 0,
                    duration: 350,
                    timing: "cubic-bezier(0, 2, 0, 2)",
                    from: 0,
                    to: 1,
                }]),
                animRotationTransform(incomingItemContent, { ltr: "0px 50%", rtl: "100% 50%" },
                [{
                    property: transformNames.cssName,
                    delay: 0,
                    duration: 350,
                    timing: "cubic-bezier(0,0.62,0.8225,0.9625)",
                    from: "rotateX(80deg) scale(1.5, 1.5)",
                    to: "rotateX(0deg) scale(1.0, 1.0)"
                },
                {
                    property: "opacity",
                    delay: 0,
                    duration: 350,
                    timing: "cubic-bezier(0, 2, 0, 2)",
                    from: 0,
                    to: 1,
                }])
            ])
            .then(function () { writeAnimationProfilerMark("continuumForwardIn,StopTM"); });
        },