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

安装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

css:[
  ''aos/dist/aos.css'',
],