快速上手VueJS动画
动画可以使您的网站更具现代感，而且还能为网站带来更好的用户体验。幸运的是，对于开发人员来说，VueJS动画只需几分钟即可完成设置。
在本教程结束时，您将拥有第一个VueJS动画，并了解和学习到如何将其添加到项目中。这是我们将要创建的两个示例。
首先，创建自己的CSS动画样式。
然后，了解如何将第三方CSS库与Vue动画一起使用。
让我们赶快开始吧。
过渡元素
动画的处理与VueJS过渡非常相似。他们都使用Vue的<transition>元素。
<transition>元素是一个包装器组件，为以下元素提供开始/结束转换类和钩子
- 有条件的渲染或显示元素（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
好了！我们已经了解了<transition>元素，现在让我们使用它来制作动画。
创建我们的第一个动画
对于初学者，我们需要一个条件元素，并在其周围加上过渡元素。我们的入门单个文件组件看起来像这样。
<template>
<div class='main-content'>
<transition name='rotate'>
<img
v-if='show'
src='../img/logo.png'
>
</transition>
</div>
</template>
<script>
export default {
data () {
return {
show: true
}
}
}
</script>接下来，让我们添加一个按钮，该按钮可通过切换变量的值来切换元素的显示。
<button @click='show = !show'> Toggle </button>设置好元素的条件渲染后，我们使用两个类来设置动画的样式：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动画中。
在第一个示例中，我们只使用了<transition>元素生成的默认类名，但是我们可以做的就是将这些值覆盖到我们想要的任何类中，在这种情况下，它将是CSS库中的类名。
下边的示例中，我们将使用Animate.css – 要添加此代码，只需将CDN链接添加到我们的index.html文件即可。
index.html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">现在，在我们的<transition>元素中，我们可以使用enter-active-class和Leave-active-class属性将transition过渡关联到Animate.js。请注意，要使用Animate.css，还需要添加animated类。
<transition
enter-active-class="animated fadeIn zoomIn"
leave-active-class="animated fadeOut zoomOut"
>
...
</transition>超级简单，这是结果：
现在，我们已经学会了如何在项目中添加VueJS动画。
最后
重要的是不要过度做事。添加过多的动画也是使您的网站显得俗气的一种快速方法，但是使用动画添加微妙的视觉反馈，同样也能使您的网站对用户更加友好。只是要合理有度地使用！
希望本教程可以帮助您熟悉Vue动画和过渡，编码愉快！