Vue.js过渡系统：掌握动画效果的秘诀

过渡系统是Vue.js为DOM动画效果提供的一个特性，

它能在元素从DOM中插入或移除时触发你的CSS过渡（transition）和动画（animation），也就是说在DOM元素发生变化时为其添加特定的class类名，从而产生过渡效果。

除了CSS过渡外，Vue.js的过渡系统也支持javascript的过渡，

通过暴露过渡系统的钩子函数，我们可以在DOM变化的特定时机对其进行属性的操作，产生动画效果。

SS过渡的用法

首先举一个例子来说明CSS过渡系统的使用方式：

<div v-if="show" transition="my-startup"></div>

var vm = new Vue({

　el : '#app',

　data: {

　　show : false

　}

});

首先在模板中用transition绑定一个DOM元素，并且使用v-if指令使元素先处于未被编译状态。然后在控制台内手动调用vm.show = true, 就可以看到DOM元素最后输出为：

<div class="my-startup-transition"></div>

我们可以看到在DOM元素完成编译后，过渡系统自动给元素添加了一个my-startup-transition的class类名。

CSS过渡钩子函数

Vue.js提供了在插入或DOM元素时类名变化的钩子函数，可以通过Vue.transition('name', {})的方式来执行具体的函数操作。

显示声明过渡类型

Vue.js可以指定过渡元素监听的结束事件的类型， 例如：

Vue.transition('done-type', {

　type: 'animation'

})

此时Vue.js就只监听元素的animationend事件，避免元素上还存在transition时导致的结束事件触发不一致。

自定义过渡类名

除了使用默认的类名*-enter, *-leave外，Vue.js也允许我们自定义过渡类名，例如：

Vue.transition('my-startup', {

　enterClass: 'fadeIn',

　leaveClass: 'fadeOut'

})

我们可以通过上述钩子函数的例子，观测元素的类名变化：

Vue.js官方推荐了一个CSS动画库，animate.css，配合自定义过渡类名使用，

可以达到非常不错的效果。

【B站推荐】Vue全套视频教程，从vue2.0到vue3.0一套全覆盖，前端必会的框架教程包含4套优质VUE练手项目，从零开始入门到精通，一套搞定。_哔哩哔哩_bilibili