Vue一个案例引发「动画」的使用总结-白红宇

项目开发中动画有着很重要的作用，而且也是用到的地方非常多，例如：鼠标的进入离开，弹窗效果，组件的显示隐藏，列表的切换等等，可以说我们网页上的动画无处不在，也有人说了，这些东西也可以不使用动画。

对，你说的没错可以不使用，但是，首先你要说服你的产品经理咱能不能简单点，不搞这么多虚的来点实际的，说完之后我估计你们俩得立马干起来，其次，在你的网页上不使用动画不够逼格啊，而且咱们的网页也不够生动，没有活力，由此可见动画的不可或缺性。

上面只是开个玩笑，下面咱们进入主题，看看 Vue 中如何更好更简单的添加动画。

首先，Vue 在插入，修改或者移除 DOM 时，提供了多种不同的添加动画的方法，在 Vue 中我们使用 <transition> 和 <transition-group> 组件时，Vue 会给我们提供一些内置的 CSS 类与 JS 钩子函数。

先来看看我们要实现一个什么样子的案例效果

图中的例子是一个非常常见的图片切换效果，不过在这个例子中我们只是单纯的实现图片的切换，看起来非常的生硬，没有任何的过渡效果，下面我们来给图片加一点动画的效果，让它看起来非常的有逼格。

被 <transition> 包裹的组件，在组件的不同阶段会产生不同的 class 类名进行切换

官网上的一张图片非常友好的展示了这个切换的过程。

v- 是 Vue 中默认的类名前缀，我们在使用的过程中如果一直使用默认的命名方式的话，必然会导致一些冲突，所以 Vue 给我们提供了一个自定义命名的方案，我们只需要给 <transition> 添加一个 name 属性即可。

既然我们知道了方法，我们就来给它加一个简单的动画。

与上面 CSS 过渡不同的是，我们这里说的 CSS 动画是利用 @keyframes 来创建与上面类似的动画效果。

复制代码

Vue 中给我们提供了自定义 CSS 类名的方法，非常好的支持了与第三方动画库的结合。

上面两个动画都是我们自己动手写出来的，但是有些时候我们自己手写的并不是那么完美，或者项目的时间比较紧张，这个时候选择第三方库就是一个比较好的方案。我们继续利用 Animate.css 动画库修改我们上面的例子。


        
     
    复制代码

Vue 中还给我们提供了一些钩子函数，我们可以使用 JavaScript 钩子函数构建动画。


    复制代码

所有钩子都会传入一个 el（元素）参数，enter/leave 函数还会传入一个 done 函数作为参数。它会告知我们的动画完成，我们绑定了 css 为 false，告诉组件跳过 CSS 的检测，使用 JavaScript。

我们结合 Velocity.js 动画，来修改完成我们的动画效果。


        
     
    复制代码

我们再来回头看看上面的例子，不管我们使用何种方式实现的动画，你会发现一个问题就是，动画在切换的时候两者（进入/离开）是同时进行的，有些时候，我们并不希望产生这种效果，对我们的动画效果非常的不友好，比如我们看看下面的这个例子。


    复制代码

很显然，这种是非常不好的效果，值得高兴的是 Vue 中给我们提供了一个解决方案-- 过渡模式，我们不需要增加额外的代码，只需要修改下特性即可。

Vue 给我们提供了两种过渡模式。

过渡模式只会在相互切换的元素中才会生效


    
    复制代码

下面我们就用过渡模式修改我们上面的案例。

Vue 给我们提供了比较直观灵活的 API，方便我们在项目中添加动画的效果。

Vue 中除了这些单元素的动画以外还提供了<transition-group> 给我的列表（使用v-for 时的场景）添加动画，喜欢动画的小伙伴可以动手去尝试绘制一些自己喜欢的动画。

文中如有不足之处，欢迎留言指正，如果本文对你有帮助，欢迎转发点赞。