快速上手VueJS动画
动画可以使您的网站更具现代感，而且还能为网站带来更好的用户体验。幸运的是，对于开发人员来说，VueJS动画只需几分钟即可完成设置。
在本教程结束时，您将拥有第一个VueJS动画，并了解和学习到如何将其添加到项目中。这是我们将要创建的两个示例。
首先，创建自己的CSS动画样式。
然后，了解如何将第三方CSS库与Vue动画一起使用。
让我们赶快开始吧。
过渡元素
动画的处理与VueJS过渡非常相似。他们都使用Vue的
- 有条件的渲染或显示元素（v-show或v-if）
- 动态组件（:is）
- 组件根节点（可以包装整个组件）
能够检测这些元素之一何时更改状态的元素-它的可见性是否更改，内容是否更改，或者是否已添加到DOM。然后，它添加了某些过渡类，我们可以使用它们来设置过渡的样式。
默认情况下，有六个可用的类：
- v-enter / v-leave：过渡的开始状态；过渡开始后删除
- v-enter-active / v-leave-active：过渡的活动状态
- v-enter-to / v-leave-to：过渡的结束状态
这六个是无名transition的默认名称。如果我们为transition赋予name属性，则这些类将变为name-enter，name-enter-active等。
另外，transition元素还会发出JS钩子事件，因此我们可以捕获它们，并使用Javascript（而不是CSS）执行动画。可用的钩子是：
- before-enter / before-leave
- enter / leave
- after-enter / after-leave
- enter-cancelled / leave-cancelled
好了！现在我们已经了解了
建立我们的第一个动画
对于初学者，我们需要一个条件元素，并在其周围加上过渡元素。我们的入门单个文件组件看起来像这样。
接下来，让我们添加一个按钮，该按钮可通过切换变量的值来切换元素的显示。
设置好元素的条件渲染后，我们使用两个类来设置动画的样式：rotate-enter-active 和 rotate-leave-active，因为我们将transition命名为rotate。
一个很酷的技巧是让离开动画与开始动画一样，只是方向相反！
@keyframes rotate {
0% { opacity: 0; transform: scale(0) rotate(-180deg); }
100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
.rotate-enter-active {
animation: rotate 0.2s;
}
.rotate-leave-active {
animation: rotate 0.2s reverse;
}现在，当我们查看组件并切换组件时，会看到：
搞定了！我们已经用上了VueJS动画！
使用第三方库
如果我们不想自己编写所有的CSS动画，那么可以考虑使用很多很棒的CSS动画库，可以很容易地将它们合并到VueJS动画中。
在第一个示例中，我们只使用了
下边的示例中，我们将使用Animate.css – 要添加此代码，只需将CDN链接添加到我们的index.html文件即可。
index.html
现在，在我们的
...
超级简单，这是结果：
现在，我们已经学会了如何在项目中添加VueJS动画。
最后
重要的是不要过度做事。添加过多的动画也是使您的网站显得俗气的一种快速方法，但是使用动画添加微妙的视觉反馈，同样也能使您的网站对用户更加友好。只是要合理有度地使用！
希望本教程可以帮助您熟悉Vue动画和过渡，编码愉快！
更多好文章，欢迎访问：http://zhaima.tech
