Vue过渡与动画

一、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-