快速上手VueJS动画

发布于3/10/2020 来自:「前端知否」微信公众号

动画可以使您的网站更具现代感,而且还能为网站带来更好的用户体验。幸运的是,对于开发人员来说,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-classLeave-active-class属性将transition过渡关联到Animate.js。请注意,要使用Animate.css,还需要添加animated类。

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

超级简单,这是结果:

现在,我们已经学会了如何在项目中添加VueJS动画。

最后

重要的是不要过度做事。添加过多的动画也是使您的网站显得俗气的一种快速方法,但是使用动画添加微妙的视觉反馈,同样也能使您的网站对用户更加友好。只是要合理有度地使用!

希望本教程可以帮助您熟悉Vue动画和过渡,编码愉快!