问题现象

我总共有四行数据，每一行都是一个动画，但是触发第一个之后其他三个也都触发了

我想要的效果是：动画从底部出现的时候触发一个动画，不要都触发掉

解决之后的效果

解决办法

给 Aos.init() 这个方法添加个延时定时器

onMounted(async () => {
  await nextTick()
  const time = setTimeout(() => {
    AOS.init({
      duration: 500, // 动画持续时间
      once: false, // 确保动画每次滚动进入屏幕时都触发
      anchorPlacement: 'top-bottom', // 设置锚点位置
      delay: 0, // 延迟时间
      offset: 200, // 偏移量，确保动画稍早触发
    })
    clearTimeout(time)
  }, 300)
})

问题猜测

• 起初我以为是 v-for 的 key 值的问题，试了一下并不是这个问题。
• 查阅了网上其他人的办法，他的说法是生命周期 updated 里 调用 nextTick 等待 dom更新完之后在 aos.init()，那么可以合理怀疑是 dom 没有加载完，就初始化 aos.init() 的原因