NUXT3踩坑之scrollreveal

前言
个人需要写一个官网，技术选型选择了VUE,因为SEO所以选择了NUXT3 由于需要加入一些动画，所以选择了scrollreveal
第一次使用NUXT3，多有不熟。
我参考了网上相关的文档最后千辛万苦尝试成功。仅以此记。

代码部分
导入相关

pnpm install scrollreveal

插件配置

//plugins/scrollreveal.client.ts
import { defineNuxtPlugin } from "#app";
import scrollReveal from 'scrollreveal'
 
export default defineNuxtPlugin((nuxtApp) => {
    let data = scrollReveal();
      return {
        provide: {
            scrollReveal: data,
        },
      }
});

相关页面

<script setup lang="ts">
import { onMounted, reactive } from 'vue'
// 导入scrollReveal
const { $scrollReveal } = useNuxtApp()

const data = ref<any>(null)

onMounted(() => {
  if (process.client) {
    retScroll($scrollReveal)
  }
})

const retScroll = (data) => {
  data.reveal('#reveal-top', {
    // 动画的时长
    duration: 800,
    // 延迟时间
    delay: 300,
    // 动画开始的位置，'bottom', 'left', 'top', 'right'
    origin: 'bottom',
    // 回滚的时候是否再次触发动画
    reset: false,
    // 延时执行方式（always（一直延时执行），once（只延时执行一次），onload（只在加载时延时执行））
    // // useDelay: 'onload',
    // 在移动端是否使用动画
    mobile: true,
    // 滚动的距离，单位可以用%，rem等
    distance: '10px',
    // 其他可用的动画效果
    opacity: 0.01,
    // 执行速度 线性函数啥的
    easing: 'cubic-bezier(0.5, 0, 0, 1)',
    // 执行方式（缩放）
    scale: 0.9,
    // 使用执行之前的回调函数
    beforeReveal: function (ele) {
      //    console.log(1);
    },
  })
}
</script>
<template>
  <div>
    <div>
      <div class="test" id="reveal-top">你好</div>
    </div>
    <div>
      <div class="test" id="reveal-top">你好</div>
    </div>
    <div>
      <div class="test" id="reveal-top">你好</div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.test {
  height: 100vh;
}
</style>

参考文档
https://zhuanlan.zhihu.com/p/462298873

作品展示
预计我会把发放在这里面 http://qingha.ltd 到时候来看看吧