vue 动画

如果想在页面初始化时渲染动画效果，此时需要用到appear呈现属性和appear-active-class呈现过渡属性，语法如下

过渡+动画

如果想在元素过渡的同时添加动画效果，此时又需要用到enter-active-class和leave-active-class属性

步骤

1、添加过渡类名+动画名，这里为了方便查看效果，我将动画改为swing抖动
2、设置transition过渡属性值

一般为了效果执行完毕，时长以较长的为准，所以这里以过渡时长transition为准，此时需要添加type属性，语法如下

type=”transition”

除此之外，也可以以@keyframes动画时长为准，语法如下
type=”animation”

自定义时长

除了使用transition标签元素的type属性去指定时长外，也可以自定义时长，此时需要用到duration延迟属性，如法如下

入场时长+出场时长

除了统一设定时长外，也可以分开设置入场+出场时长，如下所示

注意：duration延时属性，如果想识别后面的表达式，需要利用v-bind动态绑定该属性，否则会报错。

动画钩子分类

入场钩子

首先新建个普通组件，可以实现简单显隐切换

（1）入场钩子before-enter进入过渡前状态

（2）入场钩子enter过渡进入完成时状态

语法：
enter钩子和before-enter稍微有些差异，before-enter会接受两个参数，语法为enter(el,done)，done为回调函数
触发时机：
当before-enter触发完毕后的下一帧，将会真正运行动画效果，整个动画效果也将放到enter这个钩子阶段。

案例：2s后元素字体颜色变绿

done回调函数：

当动画执行结束后需要手动去调用done回调函数，告诉vue动画执行完毕，至此才可以进行下一步操作，代码如下所示

（3）入场钩子after-enter过渡完成后

执行时机：
在enter过渡进入完成后触发done()回调函数，告知vue动画执行完毕，下一步执行after-enter过渡完成后钩子函数。
要求：过渡完成后字体变黑

（4）入场钩子enter-cancelled过渡被打断

上面的钩子函数中可以进行任何你想做的DOM操作。

Vue+Velocity.js

接下来结合具体案例来介绍下Vue+Velocity.js实现相关动效

（1）引入Velocity.js文件

（2）接下来清除原先动画钩子创建的自定义动画，开始使用Velocity.js实现特效，代码重置如下所示。

（3）结合动画钩子，设定入场前透明度为0，如下所示

（4）入场前为0，动画开始执行到enter阶段时，希望透明度由0慢慢变为1，即设置入场动画过程透明度为1，结合Velocity.js代码库，代码如下所示

（5）complete完结属性
目前为止，测试后发现可以出现效果，但是存在BUG…

多元素过渡

（1）利用条件编译指令v-if与v-else实现多元素内容切换.

（2）接下来在内容切换基础上，添加过渡动画，例如渐隐渐现效果
1、transition添加name属性命名
2、设置过渡状态

（3）状态管理
测试后发现并没有过渡效果，分析原因Vue在多个元素切换过程中会尽量复用DOM，如果不加key，那么vue会选择复用节点(Vue的就地更新策略)，导致之前节点的状态被保留下来，由此产生一系列的bug.。
方案：给多元素添加不同key进行状态管理，代码如下

多组件过渡

多组件实现过渡效果，代码如下，直接将多元素修改为多组件即可

多组件过渡也可以结合动态组件进行操作，首先写个基础动态组件案例，如下所示

接下来添加transition过渡

列表过渡

目前为止，仅仅实现了单个&&多个元素、单个&&多个组件的过渡动画，接下来介绍下针对列表增删时做的一些过渡动
画操作。

（1）首先将基础架构搭建好，要求点击按钮时添加新内容到列表尾部

（2）目前为止已经实现点击添加效果，如下所示

列表过渡动画标签
（1）对于列表过渡需要用到列表过渡标签transition-group
（2）定义CSS过渡效果

动画封装

如果部分效果在页面里应用较多，可以对其进行动画封装，以方便日后调用

（1）首先创建基础动画，即简单的显隐切换动画
（2）封装动画组件
（3）调用组件
组件内部为了响应slot插槽，所以需要填入对应DOM元素，同时传入参数
（4）改良版—JS动画
动画的封装不仅可以使用CSS实现，同时也可以借助动画钩子，使用JS实现动画效果。
即将如下的CSS动画代码也封装到组件里