js IntersectionObserver异步观察目标元素与其祖先元素或顶级文档视口（viewport）交叉状态的方法

    <div class="train-group">
      <div
        class="train-card animate__animated animate__fadeInUp"
        :class="`animate__delay_${index}`"
        v-for="(item, index) in trainList"
        :key="item"
        @click="goDetails2(item)"
      >
        <div class="train-info">
          <div class="flex-between">
            <div class="title">{{ item.name }}</div>
          </div>
        </div>
        <div class="learnMore">点击查看更多&nbsp;>></div>
      </div>
    </div>
    
    
    
    
    
  // 创建 Intersection Observer 实例
  observer.value = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        document.querySelectorAll('.train-card').forEach(card => {
          card.classList.add('animate__fadeInUp')
        })
      } else {
        document.querySelectorAll('.train-card').forEach(card => {
          card.classList.remove('animate__fadeInUp')
        })
      }
    })
  })
  // 观察元素
  observer.value.observe(document.querySelector('.train-group'))