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 预设的缓动曲线,
最后,我们通过模版绑定动画的宿主,实现对用户操作的响应
**
前行的路上,感谢您的鼓励!!
**