Nuxt Anime 模块

Nuxt 的 Anime 模块。

功能

帮助您集成 Anime.js 动画库
全局提供主要的 anime 助手
支持自定义组合式函数
零配置设置，即用即插
TypeScript 友好
超级易用

快速入门

将 @hypernym/nuxt-anime 安装到您的项目中

npm i -D @hypernym/nuxt-anime

在主配置文件中启用该模块

// nuxt.config.ts

{
  modules: ['@hypernym/nuxt-anime']
}

就是这样！开始开发您的应用程序吧！

模块

该模块带有 零配置 设置，因此在激活后，它会自动添加 Anime.js 核心，并且无需其他设置即可全局使用。

<!-- layout.vue | page.vue | component.vue -->

<template>
  <div>
    <h1 class="title">Nuxt Anime</h1>
  </div>
</template>

<script setup lang="ts">
  const { $anime } = useNuxtApp()

  onMounted(() => {
    $anime({ targets: '.title', translateX: 250, duration: 800 })
  })
</script>

选项

Nuxt Anime 模块经过优化，并支持使用 TypeScript 的 Nuxt 3。它还通过详细的描述、示例和代码自动完成功能改善了开发体验。

// nuxt.config.ts

{
  modules: ['@hypernym/nuxt-anime'],

  anime: {
    // Module options
  }
}

提供

类型：boolean
默认值：true

全局提供主要的 $anime 助手。

// nuxt.config.ts

{
  anime: {
    provide: true
  }
}

全局可用

const { $anime } = useNuxtApp()

$anime({ targets: '.class', translateX: 250, duration: 800 })

组合式函数

类型：boolean
默认值：undefined

指定自定义组合式函数。

如果启用，则允许使用自定义组合式函数。

// nuxt.config.ts

{
  anime: {
    composables: true
  }
}

useAnime

提供主要的 anime 函数作为自定义组合式函数。

<script setup lang="ts">
  onMounted(() => {
    useAnime({ targets: '.class', translateX: 250, duration: 800 })
  })
</script>

// Explicit import (optional)
import { useAnime } from '#anime'

自动导入

类型：boolean
默认值：true

指定 自动导入 功能。

如果启用，组合式函数将全局可用，因此无需手动导入它们。

由于这是一个有主见的功能，您可以禁用全局 自动导入，仅在需要时使用显式导入。

仅当 composables: true 选项启用时才有效。

// nuxt.config.ts

{
  anime: {
    autoImport: false
  }
}

社区

如有任何其他问题，请随时使用官方的讨论区。

许可证

Anime.js 库

有关 Anime.js 许可证的更多详细信息，请参阅官方存储库。

Nuxt Anime 模块

在🇭🇷克罗地亚开发

在 MIT 许可证下发布。