{ "id": "api/animations/animation", "title": "animation", "contents": "\n\n
\n
\n
\n \n API > @angular/animations\n
\n
\n mode_edit\n code\n
\n
\n \n
\n

animationlink

\n \n \n \n \n \n
\n \n \n\n
\n \n
\n

Produces a reusable animation that can be invoked in another animation or sequence,\nby calling the useAnimation() function.

\n\n \n
\n \n \n \n\n
\n \n\n animation(steps: AnimationMetadata | AnimationMetadata[], options: AnimationOptions = null): AnimationReferenceMetadata\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n steps\n AnimationMetadata | AnimationMetadata[]\n

One or more animation objects, as returned by the animate()\nor sequence() function, that form a transformation from one state to another.\nA sequence is used by default when you pass an array.

\n\n
\n \n options\n AnimationOptions\n

An options object that can contain a delay value for the start of the\nanimation, and additional developer-defined parameters.\nProvided values for additional parameters are used as defaults,\nand override values can be passed to the caller on invocation.

\n

Optional. Default is null.

\n\n
\n\n \n
Returns
\n

AnimationReferenceMetadata: An object that encapsulates the animation data.

\n \n \n\n\n \n\n \n
\n\n\n \n\n \n\n\n\n \n
\n

Usage noteslink

\n

The following example defines a reusable animation, providing some default parameter\nvalues.

\n\nvar fadeAnimation = animation([\n style({ opacity: '{{ start }}' }),\n animate('{{ time }}',\n style({ opacity: '{{ end }}'}))\n ],\n { params: { time: '1000ms', start: 0, end: 1 }});\n\n

The following invokes the defined animation with a call to useAnimation(),\npassing in override parameter values.

\n\nuseAnimation(fadeAnimation, {\n params: {\n time: '2s',\n start: 1,\n end: 0\n }\n})\n\n

If any of the passed-in parameter values are missing from this call,\nthe default values are used. If one or more parameter values are missing before a step is\nanimated, useAnimation() throws an error.

\n\n
\n\n\n\n
\n
\n\n\n" }