可复用动画

Reusable animations

前提条件

Prerequisites

对下列概念有基本的理解：

A basic understanding of the following concepts:

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

The AnimationOptions interface in Angular animations enables you to create animations that you can reuse across different components.

创建可复用动画

Creating reusable animations

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

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.

src/app/animations.ts

      
      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 }}')
]);

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

In the above code snippet, transAnimation is made reusable by declaring it as an export variable.

注意：height、opacity、backgroundColor 和 time 这几个输入项会在运行期间被替换掉。

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

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

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

src/app/open-close.component.ts

      
      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'
          }
        })
      ])
    ])
})

关于 Angular 动画的更多知识

More on Angular animations

你可能还对下列内容感兴趣：

You may also be interested in the following:

可复用动画link

Reusable animationslink

前提条件link

Prerequisiteslink

创建可复用动画link

Creating reusable animationslink

关于 Angular 动画的更多知识link

More on Angular animationslink