快速上手VueJS动画

动画可以使您的网站更具现代感，而且还能为网站带来更好的用户体验。幸运的是，对于开发人员来说，VueJS动画只需几分钟即可完成设置。

在本教程结束时，您将拥有第一个VueJS动画，并了解和学习到如何将其添加到项目中。这是我们将要创建的两个示例。

首先，创建自己的CSS动画样式。

 

 

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

 

 

让我们赶快开始吧。

 

过渡元素

动画的处理与VueJS过渡非常相似。他们都使用Vue的<transition>元素。

<transition>元素是一个包装器组件，为以下元素提供开始/结束转换类和钩子

• 有条件的渲染或显示元素（v-show或v-if）
• 动态组件（:is）
• 组件根节点（可以包装整个组件）

能够检测这些元素之一何时更改状态的元素-它的可见性是否更改，内容是否更改，或者是否已添加到DOM。然后，它添加了某些过渡类，我们可以使用它们来设置过渡的样式。

默认情况下，有六个可用的类：

• v-enter / v-leave：过渡的开始状态