一、vue过渡与动画概述
1、Vue使用transition组件实现了过渡与动画,Vue的过渡系统可以在元素从DOM中插入或移除时自动应用过渡效果,也提供配合使用第三方 CSS 动画库(如 animate.css)来实现动画效果。
二、transition组件
1、Vue提供了实现过渡动画的内置组件 transition。基本用法就是给我们需要动画的标签外面嵌 套 transition 标签,并且给上属性。实现过渡动画一般格式。
<transition>
<div></div><!--需要动画的div标签-->
</transition>
2、Vue提供了6个CSS类名在enter/leave的过渡中切换。(图示)
Enter(隐藏)
Opacity: 0 -----➤ Opacity: 1
| |
v-enter v-enter-to
| |
---------------------
|
v-enter-active
Leaver(显示)
Opacity: 1 -----➤ Opacity: 0
| |
v-leave v-leave-to
| |
---------------------
|
v-leave-active
隐藏:
v-enter:定义进入过渡的开始状态。
v-