[转]快速上手VueJS动画

找动画相关资料时看到了这篇适合快速上手的文章，转自 blog.csdn.net/EthanQ/article/detai... ，作者 EthanQ，若侵删
想对 CSS 动画有更多的了解，还可参考 MDN 相关文档，以及官方文档 列表过度

动画可以使您的网站更具现代感，而且还能为网站带来更好的用户体验。幸运的是，对于开发人员来说，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

好了！现在我们已经了解了元素，让我们开始使用它来制作动画吧。

建立我们的第一个动画

对于初学者，我们需要一个条件元素，并在其周围加上过渡元素。我们的入门单个文件组件看起来像这样。

<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动画中。

在第一个示例中，我们只使用了元素生成的默认类名，但是我们可以做的就是将这些值覆盖到我们想要的任何类中，在这种情况下，它将是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">

现在，在我们的元素中，我们可以使用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动画和过渡，编码愉快！

更多好文章，欢迎访问：http://zhaima.tech