4、Vue 过渡和动画

4、Vue 过渡和动画

在项目中使用过渡和动画提高用户体验和页面的交互性、影响用户的行为、引导用户的注意力以及帮助用户看到自己动作的反馈。

4.1、过渡和动画基础

4.1.1、什么是过渡和动画

过渡，就是从一个状态向另一个状态插入值，新的状态替换了旧的状态。

动画相比过来来说，可以在一个声明中设置多个状态。

Vue 提供了内置的过渡封装组件，即 transition 组件，语法格式如下：

<transition name="fade">
    <!-- 需要添加过度的 div 标签 -->
    <div></div>
</transition>

transition 标签中用来放置需要添加过渡的 div 元素，使用 name 属性可以设置前缀，将 name 属性设为 fade，那么 “fade-” 就是在过渡中切换的类名前缀。

如果没有设置 name 属性名，那么 “v-” 就是这些类名的默认前缀。

4.1.2、transition 组件

Vue 为 标签内部的元素提供了3个进入过渡的类和3个离开的类。

​ 过渡类型

过渡类型	说明
v-enter	进入过渡的开始状态，作用于开始的一帧
v-enter-active	进入过渡生效时的状态，作用于整个过程
v-enter-to	进入过渡的结果状态，作用于结束的一帧
v-leave	离开过渡的开始状态，作用于开始的一帧
v-leave-active	离开过渡生效时的状态，作用于整个过程
v-leave-to	离开过渡的结束状态，作用于结束的一帧

注意

v-enter-active 和 v-leave-active 可以控制进入和离开过渡的不同缓和曲线。

v-enter-to 和 v-leave-to 要求 Vue2.1.8+ 版本才可以使用。

4.1.3、自定义类名

Vue 中的 transition 组件允许使用自定义的类名。

如果使用自定义类名，则不需要给 标签设置 name 属性。

自定义的类名优先级高于普通类名，所以能够很好地与其他第三方 CSS 库结合使用。