Angular 动画

---

Angular 的动画系统除了可以构建出与原生CSS动画性能相同的动画，还可以保持动画逻辑与应用代码的紧密集成能力，让动画更容易被触发和控制

基于 Web 动画 API 构建，而不支持 WAAPI 的浏览器，则需要引入 web-animations.min.js 作为 polyfill

首先：

引入与动画有关的函数

import {     Component,    Input,    trigger,    state,    style,    transition,    animate} from '@angular/core'

然后：

在组件元数据中定义动画触发器

animations: [    trigger('heroState', [        state('inactive', style({            backgroundColor: '#eee',            transform: 'scale(1)'        })),        state('active', style({            backgroundColor: '#cfd8dc',            transform: 'scale(1.1)'        })),        transition('inactive => active', animate('100ms ease-in')),        transition('active => inactive', animate('100ms ease-out'))    ])]

以动画状态机为控制开关，定义每个状态的样式和切换时的动画过程

再然后：

绑定到一个或多个元素

<ul>     <li *ngFor="let hero of heroes"        [@heroState]='hero.state'        (click)="hero.toggleState()">        {{hero.name}}    </li></ul>

---

状态与转场

实际上，动画状态代表了元素的不同样式、功能、结构，当元素的动画状态变化时，以一段时间内的过程，完成状态的切换就是动画

在上面的定义中，规定了两个状态：active 和 inactive，

在这个两种状态下，元素的样式是有差别的，需要分别定义，

当状态进行切换时，定义了 100ms 完成的一个渐进的过程，动画的进行速率为 WAAPI 预设的缓动曲线，

最后，我们通过模版绑定动画的宿主，实现对用户操作的响应