Vue3 过渡动画Transition使用animate.css中的动画效果

在 Vue3 开发中，动画是一个非常重要的环节，让页面更优雅、流畅。使用 Vue3 提供的 Transition 组件，我们可以快速与 animate.css 组合，实现美观的动画效果。下面将详细演示如何在 Transition 中使用 animate.css 中的动画。

一、打开 animate.css 官网

首先，我们需要访问 animate.css 官网 ，在官网上可以查看 animate.css 的描述和提供的动画效果。

二、找到 CDN 链接并使用未压缩版 CSS

在 animate.css 官网上，可以找到一些 CDN 链接，这里我们使用未压缩版的 animate.css 文件，便于导出细细的动画样式。

步骤：

1. 在 animate.css 官网中找到 CDN 链接，以 cdnjs 为例：

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

2. 注意：将链接中的 min 删除，使用未压缩的文件，便于查看动画组件内部的样式。

三、查找动画名字

animate.css 提供了很多动画，比如 fadeIn 、bounce 等等。我们需要在未压缩的 CSS 文件中查找该动画的名字，并找到它对应的 from 和 to 样式。

步骤：

1. 打开未压缩的 animate.css 文件。
2. 在文件里使用搜索功能，查找指定的动画名字。 例：搜索 fadeIn 。
3. 找到该动画的 from 和 to 样式：

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

四、将动画加入 Vue3 Transition 组件

查到的 from 和 to 样式，可以直接导入 Vue3 的 Transition 组件中，以实现自定义的动画效果。

例子：

为充分寻效 animate.css 的动画，使用 fadeIn 动画为例：

<template>
  <div>
    <button @click="show = !show">显示/隐藏</button>
    <Transition>
      <div v-if="show" class="box">我是动画效果</div>
    </Transition>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const show = ref(true);
</script>

<style>
.box {
  width: 200px;
  height: 200px;
  background-color: lightblue;
}

/* 自定义的动画 */
.v-enter-active, .v-leave-active {
  animation: fadeIn 1s;
}

.v-enter-from, .v-leave-to {
  opacity: 0;
}

/* 拿来自 animate.css 的定义 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</style>

总结

通过 animate.css 中的动画，配合 Vue3 的 Transition 组件，我们可以快速实现各种炫酷的过渡动画效果。通过查找 animate.css 中动画的定义，并将其 from 和 to 样式导入 Vue3 中，即可实现灵活自定义的过渡动画。

---

📢 关于作者
嗨！我是头发秃头小宝贝，一名热爱技术分享的开发者，专注于Vue / 前端工程化 / 实战技巧等领域。
如果这篇文章对你有所帮助，别忘了 点赞 👍、收藏 ⭐ 和 关注 👏，你的支持是我持续创作的最大动力！