前言
过渡动画这东西，在现代开发中是必不可少的，死板和酷炫与之息息相关；
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>
总结
动画应该最大复用化，不然太多动画，虽然效果挺炫的，那打包体积相对也大很多对于不支持web-animationsAPI的浏览器，应当引入对应的polyfill来兼容【web-animations】
谢谢阅读，有不对之处请留言，会及时修正。
crper
认证博客专家
掘金共建者
博客专家
对设计、交互、产品都有自己的见解和追求;更多关于我:https://www.yuque.com/crper/blog/about_me
转载请注明原文地址: https://ju.6miu.com/read-668140.html
