专栏首页前端知否快速上手VueJS动画

快速上手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动画和过渡,编码愉快!

本文分享自微信公众号 - 前端知否(qianduanzhifou),作者:QETHAN

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-03-11

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue.js中的延迟加载和代码拆分

    虽然现在网络环境和电子设备变得越来越好,但是保持应用程序快速加载变得越来越困难。在本系列中,我将深入研究我们在实践中使用的Vue性能优化技术,并且您可以在Vue...

    前端知否
  • Flutter必备语言Dart教程03 - 类,泛型

    上篇中我们学习了Flutter必备语言Dart教程02 - 控制流,异常,现在我们继续学习Dart中的类和泛型。

    前端知否
  • 构建Vue.js组件的10个技巧

    Vue.js提供了两种加载组件的方法:一种在Vue实例全局,另一种在组件级别。两种方法都有其自身的优点。

    前端知否
  • Vue使用过渡类名实现动画和自定义前缀

    Dream城堡
  • open-data组件当头像用实现圆角(小程序)

    随后这个东西光写border-radius: 50%;不管用,带上边框的话能看到图片是盖在边框上的,也就是说view的属性本身都是好用的,只是显示头像的图片没被...

    坑吭吭
  • 如何使用小程序视图容器组件

    在上一篇文章中,我们介绍了小程序入门开发的基础步骤,并通过几个Hello Word例子,让大家体验了下小程序的组件及API使用,接下来的教程中,我们将教大家详细...

    宮園薰
  • 小程序弹框后禁止下面的内容滑动的方法

    只需要在禁止滑动的标签上添加一个 catchtouchmove="ture" 属性即可,代码如下:

    德顺
  • 微信小程序+和风天气完成天气预报

    花半天时间完成简单的小程序应用。适合小程序初学者。

    极乐君
  • Jerry 2016年5月20日到5月23日的学习笔记

    来自己debug 取数逻辑。通过这个练习,加深了CDS里query view和一般的CDS view的区别:

    Jerry Wang
  • 揭开SAP Fiori编程模型规范里注解的神秘面纱 - @OData.publish工作原理解析

    Jerry的前一篇文章 揭开SAP Fiori编程模型规范里注解的神秘面纱 - @ObjectModel.readOnly工作原理解析,给大家分享了@Objec...

    Jerry Wang

扫码关注云+社区

领取腾讯云代金券