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）。自动动画将应用于父元素及其直接子元素。当发生以下三个事件之一时，动画会被特别触发：

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

指令方式使用#

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

<script setup>
  import { ref } from 'vue'
  const items = ref(["😏","😐","😑","😒","😕" ])
  function removeItem(toRemove) {
    items.value = items.value.filter((item) => item !== toRemove)
  }
</script>

<template>
  <h5>Click emojis to remove them.</h5>
  <ul v-auto-animate>
    <li
      v-for="item in items"
      :key="item"
      @click="removeItem(item)"
    >
      {{ item }}
    </li>
  </ul>
</template>

请记住，传递给:key的值应该是唯一的值，否则动画将无法按预期工作。

可以通过直接设置指令的值来传递选项

composable方式使用#

作为v-auto-animate指令的替代，Vue开发者可以使用useAutoAnimate composable。这个组合支持所有相同的强大功能，但也提供了一种启用和禁用动画的机制。

从@formkit/auto-animate/vue中导入组合（Nuxt模块将自动为您导入useAutoAnimate），并在script setup中调用它以创建模板ref。使用父元素上的ref属性将其存储在模板ref中：

<script setup>
import { ref } from 'vue'
import { useAutoAnimate } from '@formkit/auto-animate/vue'

const items = ref(["React", "Vue", "Svelte", "Angular"])

function sortAsc() {
  items.value.sort()
}
function sortDesc() {
  items.value.sort().reverse()
}

const [parent] = useAutoAnimate()
</script>

<template>
  <div>
    <button @click="sortAsc">Sort A-Z ↑</button>
    <button @click="sortDesc">Sort Z-A ↓</button>
  </div>
  <ul ref="parent">
    <li
      v-for="item in items"
      :key="item"
    >
      {{ item }}
    </li>
  </ul>
</template>