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 功能。

若啟用，composable 將全域可用，因此無需手動匯入。

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

僅在啟用 composables: true 選項時運作。

// nuxt.config.ts

{
  anime: {
    autoImport: false
  }
}

社群

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

授權條款

Anime.js 函式庫

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

Nuxt Anime 模組

於 🇭🇷 克羅埃西亞開發

以 MIT 授權條款發布。