Nuxt3使用AOS动画库

临枫541

已于 2024-07-11 14:14:26 修改

阅读量170

点赞数 11

文章标签：前端 vue

于 2024-07-08 14:45:46 首次发布

本文链接：https://blog.csdn.net/weixin_68714627/article/details/140268177

版权

相关文档
Aos · Nuxt Modules

AOS - Animate on scroll library (michalsnik.github.io)

安装：

# Using pnpm
pnpm add -D nuxt-aos

# Using yarn
yarn add --dev nuxt-aos

# Using npm
npm install --save-dev nuxt-aos

配置

nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    'nuxt-aos'
  ],
  plugins: [
    '~/plugins/aos.client.ts'
  ]
})

plugins/aos.client.ts

import AOS from 'aos';

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.hook('app:mounted', () => {
    AOS.init({
      // AOS 配置项
      disable: false, // 是否禁用 AOS (可接受值: 'phone', 'tablet', 'mobile', boolean, expression, function)
      startEvent: 'DOMContentLoaded', // AOS 初始化事件
      initClassName: 'aos-init', // 初始化后添加的类名
      animatedClassName: 'aos-animate', // 动画过程中添加的类名
      useClassNames: false, // 是否将 `data-aos` 属性值作为类名添加
      disableMutationObserver: false, // 是否禁用 MutationObserver (高级)
      debounceDelay: 50, // 窗口大小调整时的去抖延迟 (高级)
      throttleDelay: 99, // 页面滚动时的节流延迟 (高级)

      // 以下选项可以通过 `data-aos-*` 属性覆盖
      duration: 1500, // 动画持续时间 (毫秒)
      easing: 'ease-out-quart', // 动画缓动函数
      offset: 120, // 触发动画的偏移量 (px)
      delay: 0, // 动画延迟 (毫秒)
      once: false, // 动画是否只播放一次
      mirror: false, // 元素滚动出视窗时是否反向播放动画
      anchorPlacement: 'top-bottom' // 动画触发点位置
    });
  });
});