Vue动画详解（transition、transition-group标签、自定义动画类名前缀和类名、动画钩子函数、搭配velocity.css、animation.css使用）

目录

Vue动画

transition标签

apperar

:duration

mode

transition-group标签

自定义进入/离开过渡动画名

自定义类名前缀

自定义类名

动画钩子函数

作用

使用方法

注意点

搭配velocity.css

引入velocity.css链接

查看样式链接

使用方法

搭配animation.css

引入animation.css链接

查看样式名链接

使用方法

---

Vue动画

可以给任何元素和组件添加进入/离开过渡，用于条件渲染 (使用 v-if)、条件展示 (使用 v-show)、动态组件、组件根节点。注意是通过在元素上绑定类名的方式实现，动画效果完成后会将所有绑定的动画类名去除，也就是说最后显示的状态不是最后的动画状态。

transition标签

将需要执行动画的元素放入<transition></transition>标签中，动画分为进入（enter）和离开（leave）两部分，每部分包括之前之中之后三过程（v-enter，v-enter-active，v-enter-to，v-leave，v-leave-active，v-leave-to，这些是类名class），注意要在CSS中定义这些类名的样式才会有动画显示，一个transition只能放入一个元素（一个根标签），但是有一种特殊情况就是2个标签上有v-if和v-else（因为总只会有一个被创建，这里也要注意2个标签如果相同，切换时是没有动画的，这是由于标签相同Vue为了性能即复用原则，直接采取了切换内容的形式，可以通过改变标签或添加key属性解决）。

apperar

在transition标签上添加appear属性，可以使元素在进入页面时就产生enter的三个过程的效果。

:duration

通过该属性指定完成时间例如:duration="{ enter: 500, leave: 800 }。

mode

用于transition标签包裹component标签时进行切换组件的动画，一般默认现有组件消失和新组件的进入动画是同时进行的，要想改变进行的次序，就添加该属性，分别可以取'in-out'和'out-in'两值，'in-out'代表新元素先进行过度，完成之后当前元素离开，另一个相反。

transition-group标签

用于解决一个transition只能放入一个元素中，通过将所有的元素中添加一个父集span标签，我们可以通过添加属性tag='ul'便可以将父集span换成ul标签，注意在搭配v-for使用时，v-for创建的多个元素之间如果元素之间的所有属性和属性值完全相同，则这些元素中只有第一个会有过度动画，其它没有，所以v-for搭配使用时需要绑定唯一key值作为属性。

自定义进入/离开过渡动画名

自定义类名前缀

通过在transition标签上添加name='str'属性，该元素的动画效果的六个过程样式类名将变为以str开头即将v-enter变为str-enter。

自定义类名

通过在标签中添加属性例如enter-class='str',该元素对应样式类名中的v-enter将会变为str（六个过程样式类名为enter-class、enter-active-class、enter-to-class (2.1.8+)、leave-class、leave-active-class、leave-to-class (2.1.8+)，将其修改便会修改对应的样式类名）

动画钩子函数

作用

用于解决在元素上绑定类名的方式实现动画会有复位问题即最后显示的状态不是最后的动画状态而是元素开始动画之前的状态。

使用方法

在transition标签属性选择以下钩子函数添加v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter" v-on:enter-cancelled="enterCancelled" v-on:before-leave="beforeLeave" v-on:leave="leave" v-on:after-leave="afterLeave" v-on:leave-cancelled="leaveCancelled"。运行时便会去methods方法中调用相应的函数名，比如由未显示到显示状态调用beforeEnter(el)、enter(el,done)和afterEnter(el)函数，这些函数都会接收一个参数el为运行动画的元素，其中enter（leave也一样）会有两个参数，第二参数为系统设置的函数名，只有在enter函数体内运行了done（），该元素才会去调用afterEnter(el)函数。

注意点

1. 添加钩子函数后还是会去css中运行最后一个动画结果，上例中如果钩子函数没有添加动画内容，会直接显示CSS中v-enter-to类名样式，所以要搭配通过v-bind:css='false'取消查找CSS类名，这样才能保证只执行钩子函数中的动画。
2. 必须在动画执行过程中（enter、leave）的函数中写上el.offsetWidh或el.offsetHeight动画才会运行。
3. 在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。
4. appear属性在钩子函数中要生效，需要延迟done（）运行（可以使用setTimeout延迟）。

搭配velocity.css

引入velocity.css链接

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>

查看样式链接

Velocity.js 中文文档 - Feature

使用方法

先导入链接，然后在钩子函数中调用例如：Velocity(el,{opacity:1,marginLeft:'300px'},3000)，第一个参数为执行动画的元素，第二个参数为需要执行动画的属性，第三个参数为执行动画的时长（毫秒），还可以为对象，对象中指定时长和循环次数例如{duration: 600,loop:2}。

搭配animation.css

引入animation.css链接

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

查看样式名链接

Animate.css | A cross-browser library of CSS animations.

使用方法

先导入链接，然后在自定义类名动画中使用enter-active-class='animated bounceInDown'，这样便会去animate.css中查找名叫bounceInDown的动画，注意使用时只改第二个参数即bounceInDown为你选定的动画名，绑定多个只生效最后一个，动画名需使用链接中右侧的目录名（不是右侧目录中提供的复制的动画名）。