Vue中使用transition或transition

        transition和transition-group是Vue官方提供的两个内置组件，他们会检测所有子节点的插入和移除，依次在这些属性作用的各个阶段抛出钩子函数接受我们定义的动画或者第三方库里的动画然后再把每个阶段的动画重新拼接成一个完整的动画效果。利用这两个内置组件可以实现一些简单的动画效果。本文针对transition和transition-group实现动画效果以例子的形式做简要介绍。

1、transition动画：

例子效果图：

点击“开“或”收“三个圆会自动展开或收起。

核心代码：

主思想：

在进入/离开的过渡中，vue提供了6个class切换，通过点击事件，类名会对应变化，我们修改对应类名的样式即可达到我们想要的动画效果。值得注意的是如果在中没有定义name，则v-是这些类名的默认前缀，若定义了name,则name-是这些类名的默认前缀。

2、transition-group动画：

在某些场景下我们希望在v-for的循环中使用动画效果，这时transition-group标签就排上了用场。transition-group的用法和transition基本一致，不同的是如果用到v-for则需要使用transition-group，并且每个 transition-group 的子节点必须有独立的 key，动画才能正常工作。

例子效果图：

在刷新页面后页面会依次显示1-4，当点击加号时，会在下方逐渐出现后续的数字和方块。

核心代码：

主思想：

在里加了appear属性，他会让初次加载的时候自动加载动画。这里加了一个定时器控制数组的变化，否则整个列表都会一起显示出来，而不是逐条显示。通过上面这个例子希望可以给大家在后续做一些动画的时候提供新的思路。

3、小结：

对于transition或transition-group标签实现动画除了本文中提到的6个过渡类名，还有一些事件比如enter、leave、appear等来绑定函数从而来实现更加精细的动画效果。transition 实现动画的思路是通过某种手段比如v-if来触发不同的过渡效果来显示不同的动画。而transition-group实现动画思路是将一个完整的动画拆分成在每个阶段，然后在编译阶段重新拼接为一个完整的动画。transition和transition-group实现简单动画效果时比较方便，但是在实现复杂动画时，比如循环嵌套循环时会出现抖动等不是我们希望出现的奇怪效果，所以如果面对比较复杂的动画效果时可以另辟蹊径选择其他的实现方式。