用于 Nuxt 的 Glaze

一个 (非官方) Glaze 模块，用于 Nuxt

快速设置

使用一个命令将模块安装到你的 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