executeAnimation function
Réduire la table des matières
Développer la table des matières

WinJS.UI.executeAnimation function

[This documentation is preliminary and is subject to change.]

Applies to: Metro style apps only

Executes a specific CSS animation on a specific element.


WinJS.UI.executeAnimation(element, animation);



Type: Object

Element or elements to be animated. This parameter can be expressed in several ways:

  • As the special value "undefined", which means that the animation has no such target
  • As a single object
  • As a JavaScript array (possibly empty), in which each element of the array can be a single element or a JavaScript array of elements.
  • As a NodeList (for example, the result of querySelectorAll)
  • As an HTMLCollection

Type: Object

The Animation Library animation object or an array of Animation Library animation objects to apply to element. This parameter must contain the following members:

  • property: The property to animate. For example:, opacity or mstransform.
    • property: opacity
    • property: mstransform
  • delay: The initial amount of time, in milliseconds, between when the animation is instructed to begin and when that animation actually begins to draw.
  • duration: The amount of time, in milliseconds, over which the animation should be performed. This does not include the delay.
  • timing: The CSS timing curve. For example:
    • timing: "linear"
    • timing: "ease-in"
    • timing: "cubic-bezier(0.1, 0.9, 0.2, 1)"
  • from: The initial value of the property at the beginning of the animation. This value must be valid for the property being animated.
  • to: The final value of the property at the end of the animation. This value must be valid for the property being animated.

Note that any member can be set to a function rather than a fixed value. In that case, the function is called for the member and its return value is used as the corresponding value in the animation. Using a function allows you to provide a different action for each element. For example, this technique is used to implement staggered animations and to allow objects to move to different final positions.

Return value

This function does not return a value.


The following example shows a call to this function.

return thisWinUI.executeAnimation(
        property: "opacity",
        delay: 0,
        duration: 83,
        timing: "linear",
        from: 1,
        to: 0

The animation parameter can contain multiple animation objects as an array. This allows you to trigger different animations against different properties simultaneously or in sequence. The following code animates both opacity and mstransform.

return thisWinUI.executeAnimation(
        property: "opacity",
        delay: 83,
        duration: 83,
        timing: "linear",
        from: 0,
        to: 1
        property: mstransform,
        delay: 0,
        duration: 367,
        timing: "cubic-bezier(0.1, 0.9, 0.2, 1)",
        from: translateCallback(offsetArray),
        to: "translate(0px, 0px)"


Minimum supported client

Windows 8 Consumer Preview

Minimum supported server

Windows Server 8 Beta





See also

Using the Animation Library animations sample



Build date: 2/10/2012

Ajouts de la communauté

© 2017 Microsoft