html中第三方动画的引用,Vue方向：Vue过渡动画以及第三方animated.css动画库

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会在不同的需要过渡的元素在进入/离开的不同时机给元素添加不同的类名.

不同阶段的类名：

图示1

图示2

3.2  过渡类名的了解

在进入/离开的过渡中，会有6个class切换.

1.  v-enter：定义进入过渡的开始状态，在元素被插入之前生效，在元素被插入之后的下一帧移除。

2.  v-enter-active：定义进入过渡生效时的状态，在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除，这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

3.  v-enter-to：2.1.8版本以上定义进入过渡的结束状态，在元素被插入之后下一帧生效(与此同时v-enter被移除)，在过渡/动画完成之后移除。

4.  v-leave：定义离开过渡的开始状态，在离开过渡被触发时立刻生效，下一帧被移除。

5.  v-leave-active：定义离开过渡生效时的状态，在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除，这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

6.  v-leave-to：2.1.8版本以上定义离开过渡的结束状态，在离开过渡被触发之后下一帧生效(与此同时v-leave被移除)，在过渡/动画完成之后移除。

代码

执行结果

3.3  过渡前缀

如果你使用一个没有名字的，则v-是这些类名的默认前缀

如果使用了，那么v-enter会替换为myname-enter.

代码

3.4  在过渡中使用贝塞尔曲线

代码

4、CSS动画

我们处理可以在Vue中使用过渡transition，还可以使用CSS动画animation

代码

执行结果

4.1  自定义过渡动画的类名

我们也可以通过以下attribute来自定义过渡类名：

1.  enter-class

2.  enter-active-class

3.  enter-to-class

4.  leave-class

5.  leave-active-class

6.  leave-to-class

它们的优先级高于普通的类名，这对于Vue的过渡系统和其他第三方CSS动画库，如：animate.css结合使用十分有效。

代码

执行效果

5、动画插件库

animated.css使用的是keyframes的动画

5.1 安装

npm  install  animate.css  --save-dev

5.2 引入