优美的v-for列表：动画钩子实践
未经允许禁止转载
打个广告，可以关注我哦~
一、开始
最近忙完工作，重新撸了一遍vue官方文档，发现很少被我用到的vue动画神器，JavaScript钩子函数
趁着周末我自己做了几个demo和大家分享下，先上图
温馨提示，本文需要了解的知识点如下：
官方文档的介绍十分详细了，我就不做多余的赘述了，这里通过实践简单说下vue动画钩子函数思想以及我的使用心得
二、实践
以下动画实现仅是个人理解，并非标准，希望大佬们指点
1.跟进列表
跟进列表是从下出现，回到初始位置，我在初始阶段采用了padding-top为100%，结束阶段为0%实现这个动画（margin-top也可以实现这个动画）
@keyframes one-in {
from {
padding-top: 100px;
height: 0%;
}
to {
padding-top: 0px;
height: 100%;
}
}
2.段落列表
段落列表是从右出现，回到正常位置，我在初始阶段采用了padding-left为100%，结束阶段为0%实现这个动画（margin-left也可以实现这个动画）
@keyframes one-in {
from {
padding-left: 100%;
}
to {
padding-left: 0%;
}
}
3.交错列表
交错列表稍微复杂点，不过我们可以分解为两个动画。
从左下出现，高度从零变到100px（具体自己设定）
@keyframes one-in {
from {
padding-right: 100%;
padding-top: 100px;
height: 0;
}
to {
padding-right: 0%;
padding-top: 0px;
height: 100px;
}
}
从右上出现，高度从零变到100px（具体自己设定）
@keyframes one-in {
from {
padding-left: 100%;
height: 0;
}
to {
padding-left: 0%;
height: 100px;
}
}
然后根据列表渲染的index为奇数或偶数选择不同的动画
methods: {
beforeEnter (el) {
el.style.opacity = 0
},
enter (el, done) {
let delay = el.dataset.index * 100
let animation = el.dataset.index % 2 === 0
? 'one-in 0.4s infinite'
: 'two-in 0.4s infinite'
setTimeout(()=>{
el.style.transition = 'opacity 0.4s '
el.style.opacity = 1
el.style.animation = animation
el.style['animation-iteration-count'] = 1
done()
}, delay)
}
}
4.更多构想
实践到这，越来越觉得页面的动画不好看，不是我们的能力差，而是我们的想象力还不够
翻转列表源代码点击这里
每个复杂的动画其实都是很多简单小动画的拼接，所以下次设计师拿来充满想象力的动画设计稿，先别急着掏菜刀，仔细分析下动画的组成部分，可能也没有那么难。
三、思想
1.对思想的理解
如果说思想，简单的说就是vue在自己封装的transition组件上检测所有子节点的插入和移除，依次在这些属性作用的各个阶段抛出钩子函数接受我们前端er自定义的动画或者第三方库里的动画
这里的依次以插入为例指动画开始前、动画开始、动画结束，也就是对应的钩子函数beforeEntry、entry、entryTo
所以，vue动画的原理是将一个完整的动画在编码拆分在每个阶段，然后编译阶段重新拼接为一个完整的动画，这也就是官网这个图的含义
2.实践心得
2.1尽量少用过度属性做复杂的动画
过度属性要求你将过度的几个状态放在不同的钩子函数中，复杂的动画代码太多，写起来不简洁，当然，如果非要这样写，建议使用添加或移除class类的方式，我一般很少用到这过度属性
2.2多用动画属性
动画属性的好处就是可以将自定义的动画重复使用，而你只需要指定动画名
2.3多使用setTiemout函数给不同dom依次设置动画延迟
想在动画上根据不同的dom设置不同的动画延迟是十分困难的，但是我们可以很方便的给dom设置动画开始时间。