@angular/animations

animation

function

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

animation(
  steps: AnimationMetadata | AnimationMetadata[],
  options?: AnimationOptions
): AnimationReferenceMetadata;

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

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

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

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

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

animation

AnimationReferenceMetadata

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

@paramstepsAnimationMetadata | AnimationMetadata[]

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

@paramoptionsAnimationOptions

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

@returnsAnimationReferenceMetadata

Usage notes

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

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

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

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

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