Reusable animations




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.

Angular 动画库中的 AnimationOptions 接口让你能创建可以在不同组件之间复用的动画。

Creating reusable animations


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 app components using the useAnimation()API.

要想创建可复用的动画,请使用 animation()方法来在独立的 .ts 文件中定义动画,并把该动画的定义声明为一个导出的 const 变量。然后你就可以在应用的组件代码中通过 useAnimation()来导入并复用它了。

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.

在上面的代码片段中,通过把 transAnimation 声明为一个导出的变量,就让它变成了可复用的。

Note: The height, opacity, backgroundColor, and time inputs are replaced during runtime.

注意:heightopacitybackgroundColortime 这几个输入项会在运行期间被替换掉。

You can import the reusable transAnimation variable in your component class and reuse it using the useAnimation() method as shown below.

你可以在组件类中导入这个可复用的 transAnimation 变量,并通过 useAnimation() 方法来复用它。代码如下:

import { Component } from '@angular/core'; import { useAnimation, transition, trigger, style, animate } from '@angular/animations'; import { transAnimation } from './animations'; @Component({ trigger('openClose', [ transition('open => closed', [ useAnimation(transAnimation, { params: { height: 0, opacity: 1, backgroundColor: 'red', time: '1s' } }) ]) ]) ], })

More on Angular animations

关于 Angular 动画的更多知识

You may also be interested in the following: