在vue3引用Animate.css（一个CSS3 动画库）教程

在vue项目中使用Animate.css库实现过渡动画效果

---

前言

简易的动画和巧妙的微交互功能如今风行一时。前端在创作页面的过程中，想要实现好看的动画效果需要编写大量的css代码，与基础不好的新手而言有一定难度，而使用Animate.css库可以帮助我们更加轻松的实现我们想要的动画效果

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、Animate.css是什么？

Animate.css是一个现成的跨浏览器动画库，可用于您的 Web 项目。里面预设了很多种常用的动画，且使用非常简单。非常适合强调、主页、滑块和注意力引导提示。

详情可前往官网参考：Animate.css

二、认识transition元素

vue项目中需要通过transition元素实现动画效果
transition元素在vue中作为单个元素/组件的过渡效果。transition元素只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在可被检查的组件层级中。

transition元素在进入/离开的过渡中，会有 6 个 class 切换。

• v-enter-from：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

• v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

• v-enter-to：定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter-from 被移除)，在过渡/动画完成之后移除。

• v-leave-from：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

• v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

• v-leave-to：离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave-from 被移除)，在过渡/动画完成之后移除。
  

这里的每个 class 都将以过渡的名字添加前缀。如果你使用了一个没有名字的 ，则 v- 是这些 class 名的默认前缀。举例来说，如果你使用了 ，那么 v-enter-from 会替换为 my-transition-enter-from。

详情可前往官网参考：vue.js中的transition组件介绍部分

三、在vue项目中使用Animate.css库

1.安装

在命令行中执行：
使用npm安装
代码如下（示例）：

$ npm install animate.css --save

2.将其导入您的文件：

在你的项目目录中找到 src 文件夹中的 main.js 文件

在 main.js中将Animate.css库导入到您的项目中，即在其中添加如下代码
代码如下（示例）：

import 'animate.css';

然后在你的项目目录中找到 public 文件夹中的 index.html 文件

在其中head组件中添加如下代码
代码如下（示例）：

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.css" />

3.使用

此时Animate.css库的安装引入已经完成，可以通过添加类名来实现你想要的动画效果
而在vue项目中，我们需要在transition中添加类名，以达到我们想要的效果

Animate.css库中的动态效果的类名在官网可复制

我们可以通过以下 attribute 来自定义过渡类名：

• enter-from-class
• enter-active-class
• enter-to-class
• leave-from-class
• leave-active-class
• leave-to-class

它们的优先级高于普通的类名，其它第三方 CSS 动画库与 Vue 的过度系统相结合时十分有用，比如 Animate.css。

代码如下（示例）：

<template lang="">
<div id="root">
  <transition name="fade" enter-active-class="animated animate__headShake" leave-active-class="animated animate__zoomOutDown">
    <div v-if="show">hello world</div>
  </transition>
  <button @click="handleClick">change</button>
</div>
</template>
<script>
export default {
  data() {
    return {
      show: true,
    }
  },
  methods: {
    handleClick() {
      this.show = !this.show
    },
  },
}
</script>
<style lang="">
</style>

注意：在添加了类名前需要有 animated，之后加空格并添加你所需要的动态效果的类名才有效，否则只加类名无法生效。
代码如下（示例）：

class="animated animate__zoomOutDown"

实现效果如下：

---

总结

以上就是如何在vue项目中使用Animate.css库实现动画效果的过程。