十分钟快速学会Vue过渡和动画

Vue过渡和动画让我们网站更具现代感并为网站访问者提供更好的用户体验的好方法。幸运的是，对于开发人员而言，Vue动画只需几分钟即可完成设置。

文本主要介绍 Vue 元素，使用该元素创建一些Vue动画，并了解将其添加到项目中的基本知识。

首先，我们来看一下 Vue Transitiont 怎么处理有条件的渲染内容。

然后，创建自己的CSS动画样式。

最后，我们将了解如何将第三方CSS库与Vue动画一起使用。

理解 Vue 过渡

虽然大多数人认为过渡只是装饰，但精心设计的过渡可以：

1.抓住并引导用户的注意力
2.强调重要信息
3.引导用户浏览页面
4.帮助建立更专业的品牌形象

所有这些要点都将有助于改善我们网站的用户体验，提高转化率和用户留存率，这是双赢呀。

添加Vue过渡到我们的项目

为了适应多数的开发人员，VueJS 提供了几种实现过渡的方法：

1.css 或 动画 过渡样式
2.JS Hook 对 DOM 进行编辑
3.集成第三方CSS

这些方法的难度取决于你现有的知识。

元素是啥？

transition 元素是帮助我们向元素添加过渡功能的包装器。它提供了不同的钩子，并向不断变化的元素添加了类，这样我们就可以在转换的不同阶段对它们进行样式化。

提供了 6 个 class 来切换：

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

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

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

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

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

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

对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 ，则 v- 是这些类名的默认前缀。如果你使用了 ，那么 v-enter 会替换为 my-transition-enter。

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

将自定义库添加到代码中时，这特别有用，稍后，我们会做说明。

<transition 
  enter-active-class="animated fadeIn zoomIn" 
  leave-active-class="animated fadeOut zoomOut"
>
...
</transition>

另外，transition元素还会发出JS钩子函数，因此我们可以捕获它们并使用 JS 来执行动画。可用的钩子有：