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 = null): AnimationReferenceMetadata
steps | AnimationMetadata | AnimationMetadata[] | One or more animation objects, as returned by the |
options | AnimationOptions | 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. Optional. Default is |
AnimationReferenceMetadata
: An object that encapsulates the animation data.
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.
© 2010–2021 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v12.angular.io/api/animations/animation