Angular动画基于W3C的。不在Angular Core中了。

动画其实就是从一个状态过渡到另一个状态。状态本身包含形状，颜色，大小等。

State就是定义状态

Transition是定义如何过渡。

Animate规定了具体怎样过渡，比如时间过渡的速度等。Animate有多个重载形式。

一、例子

通过style把一些css样式应用于实现动画的元素。

在不同的状态下应用不同的状态。

transition负责在不同状态切换时候做怎样的变换。

[@square]是动画的触发器的名字。

import { trigger, state, transition, style, animate } from '@angular/animations';@Component({  selector: "app-root",  templateUrl: "./app.component.html",  styleUrls: ["./app.component.scss"],  animations: [    trigger('square', [      state('green', style({ 'background-color': 'green','height':'100px','transform':'translateX(0)'  })),      state('red', style({ 'background-color': 'red','height':'50px' ,'transform':'translateX(100%)'})),      transition('green=>red', animate('.2s 1s')),      transition('red=>green', animate(1000)),    ])  ]})export class AppComponent {  squareState:string;  onClick(){    this.squareState = this.squareState ==='red'?'green':'red';  }}

 

二、缓动函数

动画执行时候的速度，使其看起来更加真实。