vue3 + Nuxt3 使用AutoAnimate可以快速添加动画

AutoAnimate是什么？

这是FormKit提供的一个动画库。只要安装了这个库，你就可以非常轻松地使用它。虽然这个库支持Vue、React、Preact、Solid、Svelta、Angular和NativeJS，但在本文中，我将介绍如何在Vue中使用它。

官方文档： https://auto-animate.formkit.com/

设置

• 首先进行安装

npm install @formkit/auto-animate

接着，在nuxt.config.ts中添加以下内容：

export default defineNuxtConfig({
  modules: ['@formkit/auto-animate/nuxt'],
})

最后，只需在你想添加动画的父元素上添加v-auto-animate属性

<div v-auto-animate>
// 标签内的子元素会附加上动画效果
</div>