Nuxt Anime 模組

適用於 Nuxt 的 Anime 模組。

功能

協助您整合 Anime.js 動畫函式庫
全域提供主要的 anime 輔助函式
支援自訂 composables
零設定，開箱即用
對 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 模組已針對 Nuxt 3 和 TypeScript 進行最佳化並支援。它還透過詳細的描述、範例和程式碼自動完成功能來改善開發體驗。

// 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 })

Composables

類型：boolean
預設值：undefined

指定自訂 composables。

如果啟用，允許使用自訂 composables。

// nuxt.config.ts

{
  anime: {
    composables: true
  }
}

useAnime

以自訂 composable 的形式提供主要的 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 功能。

如果啟用，composables 將可在全域使用，因此無需手動匯入。

由於這是一個主觀的功能，您可以停用全域 auto-import，並僅在需要時使用明確的匯入。

僅在啟用 composables: true 選項時才有效。

// nuxt.config.ts

{
  anime: {
    autoImport: false
  }
}

社群

如有其他任何問題，請隨時使用官方討論區。

授權

Anime.js 函式庫

有關 Anime.js 授權的更多詳細資訊，請參閱官方儲存庫。

Nuxt Anime 模組

在 🇭🇷 克羅埃西亞開發

根據 MIT 授權發布。