vue过渡&动画&Animate.css动画库

3,643 阅读3分钟

一、前言

在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验,

Vue中为我们可以自定义过渡或动画或者Vue提供一些内置组件完成动画,利用它们我们可以方便的实现过渡动画效果.

二、过渡/动画

1、概述

过渡其实就是一个在设置的时间内来平滑的改变属性值。

动画用法同过渡,区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除,而是在 animationend 事件触发时删除

2、单元素/组件的过渡

Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡

  • 条件渲染 (使用 v-if)
  • 条件展示 (使用 v-show)
  • 动态组件
  • 组件根节点

3、过渡的类名

在进入/离开的过渡中,会有 6 个 class 切换。

  1. v-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。
  2. v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。
  3. v-enter-to2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除),在过渡/动画完成之后移除。
  4. v-leave:定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。
  5. v-leave-active:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。
  6. v-leave-to2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除),在过渡/动画完成之后移除。

Transition Diagram

对于这些在过渡中切换的类名来说,如果你使用一个没有名字的 <transition>,则 v- 是这些类名的默认前缀。如果你使用了 <transition name="my-transition">,那么 v-enter 会替换为 my-transition-enter

v-enter-active 和 v-leave-active 可以控制进入/离开过渡的不同的缓和曲线。

4、自定义过渡类名

我们可以通过以下特性来自定义过渡类名: enter-class enter-active-class enter-to-class (2.1.8+) leave-class leave-active-class leave-to-class (2.1.8+) 自定义过渡的类名优先级高于普通的

三、Animate.css动画库

1、概述

Animate.css是一个现成的跨浏览器动画库,可用于web项目。非常适合强调、主页、滑块和注意力引导提示。

2、安装

$ npm install animate.css --save

或者使用Yarn安装(这只能与适当的工具(如Webpack,Parcel等)一起使用。如果您没有使用任何工具来打包或捆绑您的代码,则只需使用下面的CDN方法:

$ yarn add animate.css

将其导入到您的文件中:

import 'animate.css';

或者使用 CDN 将其直接添加到您的网页中:

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>

3、Animate.css用于自定义过渡类名

<div class="a1">
    <button @click="but=!but">点我 </button>
    <transition enter-active-class="animate__animated animate__rollIn"
        leave-active-class="animate__animated animate__rollOut">
        <div class="box" v-if="but"></div>
    </transition>
</div>
<script>
new Vue({
  data: {
    but: true
  }
})
</script>

效果为:

注意:自定义过渡类名加Animate动画需要加前缀:animate__animated

4、自定义过渡类中使用Animate.css动画库并设置延迟效果

Class nameDefault delay time
animate__delay-2s2s
animate__delay-3s3s
animate__delay-4s4s
animate__delay-5s5s

5、可以在自定义过渡类中设置集成的持续时间函数

<div>
    <button @click="but=!but">点我 </button>
    <transition enter-active-class="animate__animated animate__bounceInDown animate__delay-                
    1s" leave-active-class="animate__animated animate__bounceInUp animate__delay-1s">
        <div class="box" v-if="but"></div>
    </transition>
</div>

效果为:

5、可以通过添加这些类来控制动画的速度

Class nameDefault speed time
animate__slow2s
animate__slower3s
animate__fast800ms
animate__faster500ms

还可以通过属性全局或本地自定义动画持续时间。这将影响动画和实用程序类。例:animate__animated``1s``--animate-duration