WinJS.UI.Animation 函数和源码
createExpandAnimation: function (revealed, affected) { /// /// /// Creates an expand animation. /// After creating the ExpandAnimation object, /// modify the document to move the elements to their new positions, /// then call the execute method on the ExpandAnimation object. /// // Single element or collection of elements which were revealed. /// // Single element or collection of elements whose positions were /// affected by the expand. /// /// /// ExpandAnimation object whose execute method returns /// a Promise that completes when the animation is complete. /// /// return layoutTransition(ExpandAnimation, revealed, affected); }
createCollapseAnimation: function (hidden, affected) { /// /// /// Creates a collapse animation. /// After creating the CollapseAnimation object, /// modify the document to move the elements to their new positions, /// then call the execute method on the CollapseAnimation object. /// /// /// Single element or collection of elements being removed from view. /// When the animation completes, the application should hide the elements /// or remove them from the document. /// /// /// Single element or collection of elements whose positions were /// affected by the collapse. /// /// /// CollapseAnimation object whose execute method returns /// a Promise that completes when the animation is complete. /// /// return layoutTransition(CollapseAnimation, hidden, affected); }
createRepositionAnimation: function (element) { /// /// /// Creates a reposition animation. /// After creating the RepositionAnimation object, /// modify the document to move the elements to their new positions, /// then call the execute method on the RepositionAnimation object. /// /// /// Single element or collection of elements which were repositioned. /// /// /// RepositionAnimation object whose execute method returns /// a Promise that completes when the animation is complete. /// /// return layoutTransition(RepositionAnimation, null, element); }
fadeIn: function (shown) { /// /// /// Execute a fade-in animation. /// /// /// Single element or collection of elements to fade in. /// At the end of the animation, the opacity of the elements is 1. /// /// /// Promise object that completes when the animation is complete. /// /// return thisWinUI.executeTransition( shown, { property: "opacity", delay: 0, duration: 250, timing: "linear", from: 0, to: 1 }); }
fadeOut: function (hidden) { /// /// /// Execute a fade-out animation. /// /// /// Single element or collection of elements to fade out. /// At the end of the animation, the opacity of the elements is 0. /// /// /// Promise object that completes when the animation is complete. /// /// return thisWinUI.executeTransition( hidden, { property: "opacity", delay: 0, duration: 167, timing: "linear", to: 0 }); }
createAddToListAnimation: function (added, affected) { /// /// /// Creates an animation for adding to a list. /// After creating the AddToListAnimation object, /// modify the document to move the elements to their new positions, /// then call the execute method on the AddToListAnimation object. /// /// /// Single element or collection of elements which were added. /// /// /// Single element or collection of elements whose positions were /// affected by the add. /// /// /// AddToListAnimation object whose execute method returns /// a Promise that completes when the animation is complete. /// /// return layoutTransition(AddToListAnimation, added, affected); }
createDeleteFromListAnimation: function (deleted, remaining) { /// /// /// Crestes an animation for deleting from a list. /// After creating the DeleteFromListAnimation object, /// modify the document to reflect the deletion, /// then call the execute method on the DeleteFromListAnimation object. /// /// /// Single element or collection of elements which will be deleted. /// When the animation completes, the application should hide the elements /// or remove them from the document. /// /// /// Single element or collection of elements whose positions were /// affected by the deletion. /// /// /// DeleteFromListAnimation object whose execute method returns /// a Promise that completes when the animation is complete. /// /// return layoutTransition(DeleteFromListAnimation, deleted, remaining); }
createAddToSearchListAnimation: function (added, affected) { /// /// /// Creates an animation for adding to a list of search results. /// This is similar to an AddToListAnimation, but faster. /// After creating the AddToSearchListAnimation object, /// modify the document to move the elements to their new positions, /// then call the execute method on the AddToSearchListAnimation object. /// /// /// Single element or collection of elements which were added. /// /// /// Single element or collection of elements whose positions were /// affected by the add. /// /// /// AddToSearchListAnimation object whose execute method returns /// a Promise that completes when the animation is complete. /// /// return layoutTransition(AddToSearchListAnimation, added, affected); }
createDeleteFromSearchListAnimation: function (deleted, remaining) { /// /// /// Creates an animation for deleting from a list of search results. /// This is similar to an DeleteFromListAnimation, but faster. /// After creating the DeleteFromSearchListAnimation object, /// modify the document to move the elements to their new positions, /// then call the execute method on the DeleteFromSearchListAnimation object. /// /// /// Single element or collection of elements which will be deleted. /// When the animation completes, the application should hide the elements /// or remove them from the document. /// /// /// Single element or collection of elements whose positions were /// affected by the deletion. /// /// /// DeleteFromSearchListAnimation object whose execute method returns /// a Promise that completes when the animation is complete. /// /// return layoutTransition(DeleteFromSearchListAnimation, deleted, remaining); }
showEdgeUI: function (element, offset) { /// /// /// Slides an element or elements into position at the edge of the screen. /// This animation is designed for a small object like an appbar. /// /// /// Single element or collection of elements to be slid into position. /// The elements should be at their final positions /// at the time the function is called. /// /// /// Optional offset object or collection of offset objects /// array describing the starting point of the animation. /// If the number of offset objects is less than the length of the /// element parameter, then the last value is repeated for all /// remaining elements. /// If this parameter is omitted, then a default value is used. /// /// /// Promise object that completes when the animation is complete. /// /// var offsetArray = new OffsetArray(offset, "WinJS-showEdgeUI", [{ top: "-70px", left: "0px" }]); return thisWinUI.executeAnimation( element, { keyframe: offsetArray.keyframe, property: mstransform, delay: 0, duration: 367, timing: "cubic-bezier(0.1, 0.9, 0.2, 1)", from: offsetArray.keyframe || translateCallback(offsetArray), to: "none" }); }
showPanel: function (element, offset) { /// /// /// Slides an element or elements into position at the edge of the screen. /// This animation is designed for a large object like a keyboard. /// /// /// Single element or collection of elements to be slid into position. /// The elements should be at their final positions /// at the time the function is called. /// /// /// Optional offset object or collection of offset objects /// array describing the starting point of the animation. /// If the number of offset objects is less than the length of the /// element parameter, then the last value is repeated for all /// remaining elements. /// If this parameter is omitted, then a default value is used. /// /// /// promise object /// /// var offsetArray = new OffsetArray(offset, "WinJS-showPanel", [{ top: "0px", left: "364px", rtlflip: true }]); return thisWinUI.executeAnimation( element, { keyframe: offsetArray.keyframe, property: mstransform, delay: 0, duration: 550, timing: "cubic-bezier(0.1, 0.9, 0.2, 1)", from: offsetArray.keyframe || translateCallback(offsetArray), to: "none" }); }
hideEdgeUI: function (element, offset) { /// /// /// Slides an element or elements at the edge of the screen out of view. /// This animation is designed for a small object like an appbar. /// /// /// Single element or collection of elements to be slid out. /// The elements should be at their onscreen positions /// at the time the function is called. /// /// /// Optional offset object or collection of offset objects /// array describing the ending point of the animation. /// If the number of offset objects is less than the length of the /// element parameter, then the last value is repeated for all /// remaining elements. /// If this parameter is omitted, then a default value is used. /// /// /// Promise object that completes when the animation is complete. /// /// var offsetArray = new OffsetArray(offset, "WinJS-hideEdgeUI", [{ top: "-70px", left: "0px" }]); return thisWinUI.executeAnimation( element, { keyframe: offsetArray.keyframe, property: mstransform, delay: 0, duration: 367, timing: "cubic-bezier(0.1, 0.9, 0.2, 1)", from: "none", to: offsetArray.keyframe || translateCallback(offsetArray) }); }
hidePanel: function (element, offset) { /// /// /// Slides an element or elements at the edge of the screen out of view. /// This animation is designed for a large object like a keyboard. /// /// /// Single element or collection of elements to be slid out. /// The elements should be at their onscreen positions /// at the time the function is called. /// /// /// Optional offset object or collection of offset objects /// array describing the ending point of the animation. /// If the number of offset objects is less than the length of the /// element parameter, then the last value is repeated for all /// remaining elements. /// If this parameter is omitted, then a default value is used. /// /// /// Promise object that completes when the animation is complete. /// /// var offsetArray = new OffsetArray(offset, "WinJS-hidePanel", [{ top: "0px", left: "364px", rtlflip: true }]); return thisWinUI.executeAnimation( element, { keyframe: offsetArray.keyframe, property: mstransform, delay: 0, duration: 550, timing: "cubic-bezier(0.1, 0.9, 0.2, 1)", from: "none", to: offsetArray.keyframe || translateCallback(offsetArray) }); }
showPopup: function (element, offset) { /// /// /// Displays an element or elements in the style of a popup. /// /// /// Single element or collection of elements to be shown like a popup. /// /// /// Optional offset object or collection of offset objects /// array describing the starting point of the animation. /// If the number of offset objects is less than the length of the /// element parameter, then the last value is repeated for all /// remaining elements. /// If this parameter is omitted, then a default value is used. /// /// /// Promise object that completes when the animation is complete. /// /// var offsetArray = new OffsetArray(offset, "WinJS-showPopup", [{ top: "50px", left: "0px" }]); return thisWinUI.executeAnimation( element, [{ keyframe: "WinJS-opacity-in", property: "opacity", delay: 83, duration: 83, timing: "linear", from: 0, to: 1 }, { keyframe: offsetArray.keyframe, property: mstransform, delay: 0, duration: 367, timing: "cubic-bezier(0.1, 0.9, 0.2, 1)", from: offsetArray.keyframe || translateCallback(offsetArray), to: "none" }]); }
hidePopup: function (element) { /// /// /// Removes a popup from the screen. /// /// /// Single element or collection of elements to be hidden like a popup. /// When the animation completes, the application should hide the elements /// or remove them from the document. /// /// /// Promise object that completes when the animation is complete. /// /// return thisWinUI.executeAnimation( element, { keyframe: "WinJS-opacity-out", property: "opacity", delay: 0, duration: 83, timing: "linear", from: 1, to: 0 }); }
pointerDown: function (element) { /// /// /// Execute a pointer-down animation. /// Use the pointerUp animation to reverse the effect of this animation. /// /// /// Single element or collection of elements responding to the /// pointer-down event. /// At the end of the animation, the elements' properties have been /// modified to reflect the pointer-down state. /// /// /// Promise object that completes when the animation is complete. /// /// return thisWinUI.executeTransition( element, { property: mstransform, delay: 0, duration: 167, timing: "cubic-bezier(0.1, 0.9, 0.2, 1)", to: "scale(0.975, 0.975)" }); }
pointerUp: function (element) { /// /// /// Execute a pointer-up animation. /// This reverses the effect of a pointerDown animation. /// /// /// Single element or collection of elements responding to /// the pointer-up event. /// At the end of the animation, the elements' properties have been /// returned to normal. /// /// /// Promise object that completes when the animation is complete. /// /// return thisWinUI.executeTransition( element, { property: mstransform, delay: 0, duration: 167, timing: "cubic-bezier(0.1, 0.9, 0.2, 1)", to: "" }); }
dragSourceStart: function (dragSource, affected) { /// /// /// Execute a drag-start animation. /// Use the dragSourceEnd animation to reverse the effects of this animation. /// /// /// Single element or collection of elements being dragged. /// At the end of the animation, the elements' properties have been /// modified to reflect the drag state. /// /// /// Single element or collection of elements to highlight as not /// being dragged. /// At the end of the animation, the elements' properties have been /// modified to reflect the drag state. /// /// /// Promise object that completes when the animation is complete. /// /// var promise1 = thisWinUI.executeTransition( dragSource, [{ property: mstransform, delay: 0, duration: 240, timing : "cubic-bezier(0.1, 0.9, 0.2, 1)", to: "scale(1.05)" }, { property: "opacity", delay: 0, duration: 240, timing: "cubic-bezier(0.1, 0.9, 0.2, 1)", to: 0.65 }]); var promise2 = thisWinUI.executeTransition( affected, { property: mstransform, delay: 0, duration: 240, timing: "cubic-bezier(0.1, 0.9, 0.2, 1)", to: "scale(0.95)" }); return WinJS.Promise.join([promise1, promise2]); }
dragSourceEnd: function (dragSource, offset, affected) { /// /// /// Execute a drag-end animation. /// This reverses the effect of the dragSourceStart animation. /// /// /// Single element or collection of elements no longer being dragged. /// At the end of the animation, the elements' properties have been /// returned to normal. /// /// /// Optional offset object or collection of offset objects /// array describing the starting point of the animation. /// If the number of offset objects is less than the length of the /// dragSource parameter, then the last value is repeated for all /// remaining elements. /// If this parameter is omitted, then a default value is used. /// /// /// Single element or collection of elements which were highlighted as not /// being dragged. /// At the end of the animation, the elements' properties have been /// returned to normal. /// /// /// Promise object that completes when the animation is complete. /// /// var offsetArray = new OffsetArray(offset, "WinJS-dragSourceEnd"); var promise1 = thisWinUI.executeTransition( dragSource, [{ property: mstransform, delay: 0, duration : 500, timing : "cubic-bezier(0.1, 0.9, 0.2, 1)", to: "" // this removes the scale }, { property: "opacity", delay: 0, duration: 500, timing: "cubic-bezier(0.1, 0.9, 0.2, 1)", to: 1 }]); var promise2 = thisWinUI.executeAnimation( dragSource, { keyframe: offsetArray.keyframe, property: mstransform, delay: 0, duration: 500, timing: "cubic-bezier(0.1, 0.9, 0.2, 1)", from: offsetArray.keyframe || translateCallback(offsetArray, "scale(1.05) "), to: "none" }); var promise3 = thisWinUI.executeTransition( affected, { property: mstransform, delay : 0, duration : 500, timing : "cubic-bezier(0.1, 0.9, 0.2, 1)", to: "" }); return WinJS.Promise.join([promise1, promise2, promise3]); }
enterContent: function (incoming, offset) { /// /// /// Execute an enter-content animation. /// /// /// Single element or collection of elements which represent /// the incoming content. /// At the end of the animation, the opacity of the elements is 1. /// /// /// Optional offset object or collection of offset objects /// array describing the starting point of the animation. /// If the number of offset objects is less than the length of the /// incoming parameter, then the last value is repeated for all /// remaining elements. /// If this parameter is omitted, then a default value is used. /// /// /// Promise object that completes when the animation is complete. /// /// var offsetArray; if (isSnapped()) { offsetArray = new OffsetArray(offset, "WinJS-enterContent-snapped", [{ top: "0px", left: "20px", rtlflip: true }]); } else { offsetArray = new OffsetArray(offset, "WinJS-enterContent", [{ top: "0px", left: "40px", rtlflip: true }]); } var promise1 = thisWinUI.executeAnimation( incoming, { keyframe: offsetArray.keyframe, property: mstransform, delay: 0, duration: 550, timing: "cubic-bezier(0.1, 0.9, 0.2, 1)", from: offsetArray.keyframe || translateCallback(offsetArray), to: "none" }); var promise2 = thisWinUI.executeTransition( incoming, { property: "opacity", delay: 0, duration: 170, timing: "cubic-bezier(0.1, 0.9, 0.2, 1)", from: 0, to: 1 }); return WinJS.Promise.join([promise1, promise2]); }
exitContent: function (outgoing, offset) { /// /// /// Execute an exit-content animation. /// /// /// Single element or collection of elements which represent /// the outgoing content. /// At the end of the animation, the opacity of the elements is 0. /// /// /// Optional offset object or collection of offset objects /// array describing the ending point of the animation. /// If the number of offset objects is less than the length of the /// outgoing parameter, then the last value is repeated for all /// remaining elements. /// If this parameter is omitted, then a default value is used. /// /// /// Promise object that completes when the animation is complete. /// /// var offsetArray = new OffsetArray(offset, "WinJS-exit", [{ top: "0px", left: "0px" }]); var promise1 = thisWinUI.executeAnimation( outgoing, offset && { keyframe: offsetArray.keyframe, property: mstransform, delay: 0, duration: 117, timing: "linear", from: "none", to: offsetArray.keyframe || translateCallback(offsetArray) }); var promise2 = thisWinUI.executeTransition( outgoing, { property: "opacity", delay: 0, duration: 117, timing: "linear", to: 0 }); return WinJS.Promise.join([promise1, promise2]); }
dragBetweenEnter: function (target, offset) { /// /// /// Execute an animation which indicates that a dragged object /// can be dropped between other elements. /// Use the dragBetweenLeave animation to reverse the effects of this animation. /// /// /// Single element or collection of elements (usually two) /// that the dragged object can be dropped between. /// At the end of the animation, the elements' properties have been /// modified to reflect the drag-between state. /// /// /// Optional offset object or collection of offset objects /// array describing the ending point of the animation. /// If the number of offset objects is less than the length of the /// element parameter, then the last value is repeated for all /// remaining elements. /// If this parameter is omitted, then a default value is used. /// /// /// Promise object that completes when the animation is complete. /// /// var offsetArray = new OffsetArray(offset, null, [{ top: "-40px", left: "0px" }, { top: "40px", left: "0px" }]); return thisWinUI.executeTransition( target, { property: mstransform, delay: 0, duration: 200, timing: "cubic-bezier(0.1, 0.9, 0.2, 1)", to: translateCallback(offsetArray, "scale(0.95) ") }); }
dragBetweenLeave: function (target) { /// /// /// Execute an animation which indicates that a dragged object /// will no longer be dropped between other elements. /// This reverses the effect of the dragBetweenEnter animation. /// /// /// Single element or collection of elements (usually two) /// that the dragged object no longer will be dropped between. /// At the end of the animation, the elements' properties have been /// set to the dragSourceStart state. /// /// /// Promise object that completes when the animation is complete. /// /// return thisWinUI.executeTransition( target, { property: mstransform, delay: 0, duration: 200, timing: "cubic-bezier(0.1, 0.9, 0.2, 1)", to: "scale(0.95)" }); }
swipeSelect: function (selected, selection) { /// /// /// Slide a swipe-selected object back into position when the /// pointer is released, and show the selection mark. /// /// /// Single element or collection of elements being selected. /// At the end of the animation, the elements' properties have been /// returned to normal. /// /// /// Single element or collection of elements that is the selection mark. /// /// /// Promise object that completes when the animation is complete. /// /// var promise1 = thisWinUI.executeTransition( selected, { property: mstransform, delay: 0, duration: 300, timing: "cubic-bezier(0.1, 0.9, 0.2, 1)", to: "" }); var promise2 = thisWinUI.executeAnimation( selection, { keyframe: "WinJS-opacity-in", property: "opacity", delay: 0, duration: 300, timing: "cubic-bezier(0.1, 0.9, 0.2, 1)", from: 0, to: 1 }); return WinJS.Promise.join([promise1, promise2]); }
swipeDeselect: function (deselected, selection) { /// /// /// Slide a swipe-deselected object back into position when the /// pointer is released, and hide the selection mark. /// /// /// Single element or collection of elements being deselected. /// At the end of the animation, the elements' properties have been /// returned to normal. /// /// /// Single element or collection of elements that is the selection mark. /// /// /// Promise object that completes when the animation is complete. /// /// var promise1 = thisWinUI.executeTransition( deselected, { property: mstransform, delay: 0, duration: 300, timing: "cubic-bezier(0.1, 0.9, 0.2, 1)", to: "" }); var promise2 = thisWinUI.executeAnimation( selection, { keyframe: "WinJS-opacity-out", property: "opacity", delay: 0, duration: 300, timing: "cubic-bezier(0.1, 0.9, 0.2, 1)", from: 1, to: 0 }); return WinJS.Promise.join([promise1, promise2]); }
swipeReveal: function (target, offset) { /// /// /// Reveal an object as the result of a swipe, or slide the /// swipe-selected object back into position after the reveal. /// /// /// Single element or collection of elements being selected. /// At the end of the animation, the elements' properties have been /// modified to reflect the specified offset. /// /// /// Optional offset object or collection of offset objects /// array describing the ending point of the animation. /// When moving the object back into position, the offset should be /// { top: "0px", left: "0px" }. /// If the number of offset objects is less than the length of the /// element parameter, then the last value is repeated for all /// remaining elements. /// If this parameter is omitted, then a default value is used. /// The default value describes the motion for a reveal. /// /// /// Promise object that completes when the animation is complete. /// /// var offsetArray = new OffsetArray(offset, null, [{ top: "25px", left: "0px" }]); return thisWinUI.executeTransition( target, { property: mstransform, delay: 0, duration: 300, timing: "cubic-bezier(0.1, 0.9, 0.2, 1)", to: translateCallback(offsetArray) }); }
enterPage: function (element, offset) { /// /// /// Execute an enterPage animation. /// /// /// Single element or collection of elements representing the /// incoming page. /// At the end of the animation, the opacity of the elements is 1. /// /// /// Optional offset object or collection of offset objects /// array describing the starting point of the animation. /// If the number of offset objects is less than the length of the /// element parameter, then the last value is repeated for all /// remaining elements. /// If this parameter is omitted, then a default value is used. /// /// /// Promise object that completes when the animation is complete. /// /// var offsetArray; if (isSnapped()) { offsetArray = new OffsetArray(offset, "WinJS-enterPage-snapped", [{ top: "0px", left: "40px", rtlflip: true }]); } else { offsetArray = new OffsetArray(offset, "WinJS-enterPage", [{ top: "0px", left: "100px", rtlflip: true }]); } var promise1 = thisWinUI.executeAnimation( element, { keyframe: offsetArray.keyframe, property: mstransform, delay: staggerDelay(0, 83, 1, 333), duration: 1000, timing: "cubic-bezier(0.1, 0.9, 0.2, 1)", from: offsetArray.keyframe || translateCallback(offsetArray), to: "none" }); var promise2 = thisWinUI.executeTransition( element, { property: "opacity", delay: staggerDelay(0, 83, 1, 333), duration: 170, timing: "cubic-bezier(0.1, 0.9, 0.2, 1)", from: 0, to: 1 }); return WinJS.Promise.join([promise1, promise2]); }
exitPage: function (outgoing, offset) { /// /// /// Execute an exitPage animation. /// /// /// Single element or collection of elements representing /// the outgoing page. /// At the end of the animation, the opacity of the elements is 0. /// /// /// Optional offset object or collection of offset objects /// array describing the ending point of the animation. /// If the number of offset objects is less than the length of the /// outgoing parameter, then the last value is repeated for all /// remaining elements. /// If this parameter is omitted, then a default value is used. /// /// /// Promise object that completes when the animation is complete. /// /// var offsetArray = new OffsetArray(offset, "WinJS-exit", [{ top: "0px", left: "0px" }]); var promise1 = thisWinUI.executeAnimation( outgoing, offset && { keyframe: offsetArray.keyframe, property: mstransform, delay: 0, duration: 117, timing: "linear", from: "none", to: offsetArray.keyframe || translateCallback(offsetArray) }); var promise2 = thisWinUI.executeTransition( outgoing, { property: "opacity", delay: 0, duration: 117, timing: "linear", to: 0 }); return WinJS.Promise.join([promise1, promise2]); }
crossFade: function (incoming, outgoing) { /// /// /// Execute a crossFade animation. /// /// /// Single incoming element or collection of incoming elements. /// At the end of the animation, the opacity of the elements is 1. /// /// /// Single outgoing element or collection of outgoing elements. /// At the end of the animation, the opacity of the elements is 0. /// /// /// Promise object that completes when the animation is complete. /// /// var promise1 = thisWinUI.executeTransition( incoming, { property: "opacity", delay: 0, duration: 167, timing: "linear", to: 1 }); var promise2 = thisWinUI.executeTransition( outgoing, { property: "opacity", delay: 0, duration: 167, timing: "linear", to: 0 }); return WinJS.Promise.join([promise1, promise2]); }
createPeekAnimation: function (element) { /// /// /// Creates a peek animation. /// After creating the PeekAnimation object, /// modify the document to move the elements to their new positions, /// then call the execute method on the PeekAnimation object. /// /// /// Single element or collection of elements to be repositioned for peek. /// /// /// PeekAnimation object whose execute method returns /// a Promise that completes when the animation is complete. /// /// return layoutTransition(PeekAnimation, null, element); }
updateBadge: function (incoming, offset) { /// /// /// Execute an updateBadge animation. /// /// /// Single element or collection of elements representing the /// incoming badge. /// /// /// Optional offset object or collection of offset objects /// array describing the starting point of the animation. /// If the number of offset objects is less than the length of the /// incoming parameter, then the last value is repeated for all /// remaining elements. /// If this parameter is omitted, then a default value is used. /// /// /// Promise object that completes when the animation is complete. /// /// var offsetArray = new OffsetArray(offset, "WinJS-updateBadge", [{ top: "24px", left: "0px" }]); return thisWinUI.executeAnimation( incoming, [{ keyframe: "WinJS-opacity-in", property: "opacity", delay: 0, duration: 367, timing: "cubic-bezier(0.1, 0.9, 0.2, 1)", from: 0, to: 1 }, { keyframe: offsetArray.keyframe, property: mstransform, delay: 0, duration: 1333, timing: "cubic-bezier(0.1, 0.9, 0.2, 1)", from: offsetArray.keyframe || translateCallback(offsetArray), to: "none" }]); }