Vue动画详解

Vue动画详解

Vue插入

1、前言

Vue在插入、更新或者移除DOM时，提供了多种不同方式的应用过渡效果。包括以下工具：

. 在CSS过渡和动画中自动应用class

. 可以配合使用第三方CSS动画库，如：Animate.css

. 在过渡钩子函数中使用JavaScript直接操作DOM

. 配合使用第三方JavaScript动画库，如：Velocity.js

2、过渡或动画的了解

Vue提供了transition的封装组件，来处理过渡以及动画

2.1 使用过渡或动画的场景

在下列情况中，可以给任何元素和组件添加进入/离开过渡

\1. 条件渲染(使用v-if)

\2. 条件展示(使用v-show)

\3. 动态组件

\4. 组件的根节点

2.2 使用说明

\1. 只有dom从隐藏到显示，或显示到隐藏，才能使用Vue的过渡或动画

\2. 动画的元素需要被Vue所提供的组件transition所包裹

\3. 在插入或删除transition包裹元素时，Vue会在恰当的时机添加或删除类名

\4. 如果过渡的组件提供了JavaScript钩子函数，则Vue会在恰当的时机调用这些钩子函数

\5. 如果没有找到JavaScript钩子函数，并且也没有检测到CSS过渡/动画，则会在下一帧中立即执行

3、Vue过渡的使用

3.1 过渡的了解

Vue过渡/动画两个过程，分别为进入和离开，Vue会在不同的需要过渡的元素在进入/离开的不同时机给元素添加不同的类名.<