nuxt3使用aos,实现页面滑动动画

最新推荐文章于 2024-05-13 10:57:51 发布

紫蓝清秋

最新推荐文章于 2024-05-13 10:57:51 发布

阅读量1.1k

点赞数 2

分类专栏： nuxt3 aos.js 文章标签： css html javascript vue.js

本文链接：https://blog.csdn.net/sqitarn/article/details/128674238

版权

nuxt3 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

aos.js

1 篇文章 0 订阅

订阅专栏

安装aos

npm install aos

通过plugins引入aos

在plugins目录下创建aos.js文件

import AOS from 'aos';
export default defineNuxtPlugin(() => {
  return {
    provide: {
      aos: () => AOS
    }
  }
})

然后在需要用到的页面引入

<script setup lang="ts">
const { $aos } = useNuxtApp()
onMounted(() => {
  $aos().init({
    easing: 'ease-out-back',
    duration: 1000
  })
});
</script>

<template>
  <div data-aos="fade-up" class="tw-w-40 tw-h-40 tw-bg-red-400 my-10" ></div>
  <div data-aos="fade-down" class="tw-w-40 tw-h-40 tw-bg-red-400 my-10" ></div>
  <div data-aos="fade-right" class="tw-w-40 tw-h-40 tw-bg-red-400 my-10" ></div>
  <div data-aos="fade-left" class="tw-w-40 tw-h-40 tw-bg-red-400 my-10" ></div>
  <div data-aos="fade-right" class="tw-w-40 tw-h-40 tw-bg-red-400 my-10" ></div>
</template>

到这还没效果，需要最后在nuxt.config.ts引入aos.css