A basic understanding of the following concepts:
The AnimationOptions interface in Angular animations enables you to create animations that you can reuse across different components.
To create a reusable animation, use the animation()
method to define an animation in a separate .ts
file and declare this animation definition as a const
export variable. You can then import and reuse this animation in any of your application components using the useAnimation()
API.
import { animation, trigger, animateChild, group, transition, animate, style, query } from '@angular/animations'; export const transAnimation = animation([ style({ height: '{{ height }}', opacity: '{{ opacity }}', backgroundColor: '{{ backgroundColor }}' }), animate('{{ time }}') ]);
In the above code snippet, transAnimation
is made reusable by declaring it as an export variable.
Note: The
height
,opacity
,backgroundColor
, andtime
inputs are replaced during runtime.
You can import the reusable transAnimation
variable in your component class and reuse it using the useAnimation()
method as shown below.
import { Component } from '@angular/core'; import { transition, trigger, useAnimation } from '@angular/animations'; import { transAnimation } from './animations'; @Component({ selector: 'app-open-close-reusable', animations: [ trigger('openClose', [ transition('open => closed', [ useAnimation(transAnimation, { params: { height: 0, opacity: 1, backgroundColor: 'red', time: '1s' } }) ]) ]) ], templateUrl: 'open-close.component.html', styleUrls: ['open-close.component.css'] })
You may also be interested in the following:
© 2010–2021 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v11.angular.io/guide/reusable-animations