Animation - Angular

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

Deprecation warning

Use animate.enter or animate.leave instead. Intent to remove in v23

API

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

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.