css动画2张图过渡_优美的v-for列表加载动画：vue动画钩子实践

一、开始
最近忙完工作，重新撸了一遍vue官方文档，发现很少被我用到的vue动画神器，JavaScript钩子函数
趁着周末我自己做了几个demo和大家分享下，先上图

温馨提示，本文需要了解的知识点如下：

css过度属性transition​www.w3school.com.cn css动画属性animation​www.w3school.com.cn 进入/离开 & 列表过渡 — Vue.js​cn.vuejs.org

进入/离开 & 列表过渡 — Vue.js​cn.vuejs.org

官方文档的介绍十分详细了，我就不做多余的赘述了，这里通过实践简单说下vue动画钩子函数思想以及我的使用心得
二、实践
以下动画实现仅是个人理解，并非标准，希望大佬们指点
1.跟进列表
源代码点击这里
跟进列表是从下出现，回到初始位置，我在初始阶段采用了padding-top为100%，结束阶段为0%实现这个动画（margin-top也可以实现这个动画）

@

2.段落列表
源代码点击这里
段落列表是从右出现，回到正常位置，我在初始阶段采用了padding-left为100%，结束阶段为0%实现这个动画（margin-left也可以实现这个动画）

@

3.交错列表
源代码点击这里
交错列表稍微复杂点，不过我们可以分解为两个动画。

从左下出现，高度从零变到100px（具体自己设定）

@

从右上出现，高度从零变到100px（具体自己设定）

@

然后根据列表渲染的index为奇数或偶数选择不同的动画

methods

4.更多构想
实践到这，越来越觉得页面的动画不好看，不是我们的能力差，而是我们的想象力还不够
翻转列表源代码点击这里

每个复杂的动画其实都是很多简单小动画的拼接，所以下次设计师拿来充满想象力的动画设计稿，先别急着掏菜刀，仔细分析下动画的组成部分，可能也没有那么难。
三、思想
1.对思想的理解
如果说思想，简单的说就是vue在自己封装的transition组件上检测所有子节点的插入和移除，依次在这些属性作用的各个阶段抛出钩子函数接受我们前端er自定义的动画或者第三方库里的动画
这里的依次以插入为例指动画开始前、动画开始、动画结束，也就是对应的钩子函数beforeEntry、entry、entryTo
所以，vue动画的原理是将一个完整的动画在编码拆分在每个阶段，然后编译阶段重新拼接为一个完整的动画，这也就是官网这个图的含义

2.实践心得
2.1尽量少用过度属性做复杂的动画
过度属性要求你将过度的几个状态放在不同的钩子函数中，复杂的动画代码太多，写起来不简洁，当然，如果非要这样写，建议使用添加或移除class类的方式，我一般很少用到这过度属性
2.2多用动画属性
动画属性的好处就是可以将自定义的动画重复使用，而你只需要指定动画名
2.3多使用setTiemout函数给不同dom依次设置动画延迟
想在动画上根据不同的dom设置不同的动画延迟是十分困难的，但是我们可以很方便的给dom设置动画开始时间。
参考文章： [译] 小 Tips 让你的交互动画从 “还不错” 变成 “超级棒”