一行代码轻松实现优雅的过渡动画插件——AutoAnimate

AutoAnimate是一个JavaScript工具库，可以在我们开发的Web项目中自动添加平滑过渡动画，无需任何配置。相比之前推荐的一些js动画库，AutoAnimate最大的优势就是完全不需要配置，会自动添加相应的动画。动画效果非常流畅，对提升产品的用户体验很有帮助。

AutoAnimate免费开源说明

AutoAnimate 这个项目的大部分代码由开发者 Justin Schroeder 编写，是一个基于 MIT 开源协议的开源项目，任何人都可以免费下载来使用，当然也可以用于商业项目。

AutoAnimate的技术特性

1、零配置：开发接入很简单，不需要进行复杂的配置，免去了繁琐的过程，可以让我更专注于实现动画效果；
2、插入式工具库：可以轻松地集成到项目中而不会影响我们使用其他 JavaScript 框架或库，比如常见的 React、Vue、Svelte 等，当然原生的 JavaScript 也可以直接使用；
3、自动平滑过渡动画：AutoAnimate 内置了很多平滑的动画过渡效果，会自动根据 dom 的改变来加入过渡动画，全程都是自动的。

AutoAnimate安装使用

npm install @formkit/auto-animate

AutoAnimate简单示例

<script setup>
import { ref, onMounted } from "vue"
import autoAnimate from "@formkit/auto-animate"

const dropdown = ref() // 绑定 DOM 节点
const show = ref(false)

onMounted(() => {
  autoAnimate(dropdown.value) // 关键就是这一行代码
})
</script>

<template>
  <div ref="dropdown" class="dropdown">
    <button @click="show = !show">
      展开段落
    </button>
    <p class="dropdown-content" v-if="show">这是一个用于测试的废话连篇的段落内容，不需要关注我的内容是什么，只需要看我的过渡动画效果。</p>
  </div>
</template>

进入AutoAnimate官网