Nuxt3教程：添加Autoanimate 动画库

前言

AutoAnimate是一个零配置，插入式动画实用程序，可以为您的Web应用程序添加平滑过渡。您可以将其与React，Solid，Vue，Svelte或任何其他JavaScript应用程序一起使用。

正文

安装依赖

# yarn
yarn add @formkit/auto-animate
# npm
npm install @formkit/auto-animate
# pnpm
pnpm add @formkit/auto-animate

添加配置

如果想全局注册 v-auto-animate，则在nuxt.config.ts中增加配置：

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

如果不想全局注册Vue指令，你可以直接将它导入到你想要使用它的组件中

import { vAutoAnimate } from '@formkit/auto-animate'。

AutoAnimate 基本使用

AutoAnimate基本上是一个接受父元素的单一函数（autoAnimate）。自动动画将应用于父元素及其直接子元素。当发生以下三个事件之一时，动画会被特别触发：

1. 在DOM中添加一个子元素。
2. 在DOM中删除子元素。
3. 在DOM中移动子对象。

指令方式使用

一旦你注册了这个插件，它就可以通过在父元素中添加v-auto-animate指令来应用到你的应用程序中的任何地方：

<script setup>
  import { ref } from 'vue'
  const items = ref(["

标签：动画,Autoanimate,Nuxt3,auto,items,formkit,animate,ref	

From： https://www.cnblogs.com/shuiche/p/17965042