適用於 Nuxt 的 Glaze

適用於 Nuxt 的 (非官方) Glaze 模組

快速設定

透過一個指令將此模組安裝到您的 Nuxt 應用程式

npx nuxi module add nuxt-glaze

就這樣！您現在可以在您的 Nuxt 應用程式中使用 Glaze ✨

範例 (取自其文件)

<div data-animate='from:opacity-0.5 to:opacity-1'></div>

<div data-animate='to:scale.x-2|scale.y-2'></div>

設定

您可以在您的 nuxt.config.ts 中使用 glaze 的所有設定，置於 glaze 鍵之下，如下所示

export default defineNuxtConfig({
  modules: [...],

  glaze: {
    // the root element which will be searched for elements
    element: document,
    // the attribute to search for
    dataAttribute: 'data-animate',
    // custom breakpoints
    breakpoints: {
      default: '(min-width: 1px)',
    },
    // defaults for animations
    defaults: {
      tl: 'ease-power2.inOut',
      element: 'to:x-500',
    },
    // custom presets
    presets: {
      helicopter: 'from:rotate-2160|duration-10',
    },
    // watch elements for changes and restart animations with new settings
    watch: false,
  },
})

在此處找到完整選項列表：glaze 的設定選項

文件

在此處找到完整文件和範例

文件

貢獻

本地開發

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint