vue3第一次滚动时加载动画

Vue 3 中可以通过 `v-scroll` 指令来实现滚动事件的监测，结合 `Intersection Observer API` 可以实现在第一次滚动时加载动画。

步骤如下：

1. 在需要添加动画的元素上绑定 `v-scroll` 指令。

2. 在 `mounted` 钩子函数中使用 `Intersection Observer API` 来监测元素是否进入视口。

3. 当元素进入视口时，使用 `setTimeout` 函数来延迟一段时间后添加加载动画的类名。

代码示例：

<template>
  <div class="container">
    <div class="box" v-scroll="onScroll"></div>
  </div>
</template>

<script>
export default {
  methods: {
    onScroll(entries) {
      const entry = entries[0]
      if (entry.isIntersecting) {
        // 延迟 100 毫秒添加动画类名
        setTimeout(() => {
          entry.target.classList.add('animate')
        }, 100)
      }
    }
  },
  mounted() {
    const options = {
      root: null,
      rootMargin: '0px',
      threshold: 0
    }
    const observer = new IntersectionObserver(this.onScroll, options)
    observer.observe(this.$el)
  }
}
</script>

<style>
.container {
  height: 100vh;
  overflow-y: scroll;
}

.box {
  width: 100px;
  height: 100px;
  margin: 20px auto;
  background-color: #ccc;
}

.animate {
  animation: fade-in 1s;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</style>

在上面的示例中，我们在 `mounted` 钩子函数中实例化了一个 `IntersectionObserver`，并通过 `v-scroll` 指令将其绑定在需要添加动画的元素上。当元素进入视口时，会触发 `onScroll` 方法，使用 `setTimeout` 延迟一段时间后添加动画的类名，从而实现第一次滚动时加载动画的效果。