前言
过渡动画这东西，在现代开发中是必不可少的，死板和酷炫与之息息相关；
ng2.x动画相关的api是并入@angular/core这个核心模块的，在angular4之后开始独立
但是，写法上差异不大，只是引入变了。
angular2+的过渡动画简介
Angular动画是基于标准的Web动画API(Web Animations API)构建的,
这API比较新，只有较新的浏览器才能支持(具体如下): Can I Use : Web Animations API
用起来本质上还是css2.1&3,只不过是放在api封装好的对象内，也就是说，css3的基础必须要好！！
过渡动画的相关理论
大体的归纳一下有这么几点
- 动画的过渡用于转场之间，转场的状态可以自定义
- 默认的转场包括如下(状态样式的生效可以通过传递对应的状态值生效)
inactive=>active: 待激活到激活
void => *: 进场，也可以写成:enter,*是匹配任何动画状态，* => *不会触发转场动画
* => void: 离场,也可以写成:leave,void是代表元素还没附加到视图时候的特殊状态
实战
这里拿一个最简单的渐现过渡来演示，如图
渐现代码
import { trigger, // 动画封装触发，外部的触发器 state, // 转场状态控制 style, // 用来书写基本的样式 transition, // 用来实现css3的 transition animate, // 用来实现css3的animations keyframes // 用来实现css3 keyframes的 } from '@angular/animations'; export const fadeIn = trigger('fadeIn', [ state('in', style({ display: 'none' })), // 默认元素不展开 transition('void => *', [ // 进场动画 animate(200, keyframes([ style({ height: '0', opacity: 0, offset: 0 }), // 元素高度0，元素隐藏(透明度为0)，动画帧在0% style({ height: '*', opacity: 1, offset: 1 }) // 200ms后高度自适应展开，元素展开(透明度为1)，动画帧在100% ])) ]), transition('* => void', [ animate(200, keyframes([ style({ height: '*', opacity: 1, offset: 0 }), // 与之对应，让元素从显示到隐藏一个过渡 style({ height: '0', opacity: 0, offset: 1 }) ])) ]), ]);
如何使用动画？
用法非常简单，在组件内调用即可; 具体有两种；
- 在
animations内直接写实现动画，animations接受的是一个数组
- 封装好引入 =》 推荐
components.ts
// 这是写法2;我是把动画效果独立封装到对应的ts文件内，方便复用 import { fadeIn } from '../../../../../animation/fadeIn'; import { bounceIn } from '../../../../../animation/bounceIn'; @Component({ selector: 'app-list', templateUrl: './list.component.html', styleUrls: ['./list.component.scss'], animations: [fadeIn, bounceIn] }) // 有人说为什么不直接写在代码内，比如下面这种写法 // 这种写法推荐在独立组件或者模块内，就是给第三方用，组件内部实现一个自己的过渡效果 // 若是对应系统来说，降低耦合度更方便我们维护，也就是我推荐上面那种写法的原因 @Component({ selector: 'app-list', templateUrl: './list.component.html', styleUrls: ['./list.component.scss'], animations: [ trigger('fadeIn', [ state('in', style({ display: 'none' })), // 默认元素不展开 transition('void => *', [ // 进场动画 animate(200, keyframes([ style({ height: '0', opacity: 0, offset: 0 }), // 元素高度0，元素隐藏(透明度为0)，动画帧在0% style({ height: '*', opacity: 1, offset: 1 }) // 200ms后高度自适应展开，元素展开(透明度为1)，动画帧在100% ])) ]), transition('* => void', [ animate(200, keyframes([ style({ height: '*', opacity: 1, offset: 0 }), // 与之对应，让元素从显示到隐藏一个过渡 style({ height: '0', opacity: 0, offset: 1 }) ])) ]), ])] })
html
<!--不传递状态直接调用, 用@符号来引用对应的动画--> <h3 *ngIf="list && list.length === 0" class="text-center text-muted" @fadeIn>暂无相关数据信息!!!</h3> </div> <!--传递状态的，跟常规的绑定一致--> <h3 *ngIf="list && list.length === 0" class="text-center text-muted" [@bounceIn]="list.state">暂无相关数据信息!!!</h3>
