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

指定 auto-import 功能。

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

由于这是一个有倾向性的功能，你可以禁用全局 auto-import，仅在你需要时使用显式导入。

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

// nuxt.config.ts

{
  anime: {
    autoImport: false
  }
}

社区

欢迎使用官方讨论区提出任何其他问题。

许可证

Anime.js 库

有关 Anime.js 许可证的更多详细信息，请访问官方仓库。

Nuxt Anime 模块

在 🇭🇷 克罗地亚开发

根据 MIT 许可证发布。