<template> <div> <div class="animate" data-animate="fadeIn">Hello World</div> </div> </template> <script> export default { mounted() { const options = { rootMargin: '0px', threshold: 0.2 }; const observer = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.isIntersecting) { const animateClass = entry.target.getAttribute('data-animate'); entry.target.classList.add(animateClass); observer.unobserve(entry.target); } }); }, options); const elements = document.querySelectorAll('.animate'); elements.forEach(element => { observer.observe(element); }); } }; </script>重复触发动画

可能是因为每次组件重新渲染时，都会重新添加 IntersectionObserver 观察器。可以在组件销毁时取消观察器，以避免重复触发动画。可以尝试在生命周期函数 beforeDestroy 中添加以下代码：

beforeDestroy() {
  const elements = document.querySelectorAll('.animate');
  elements.forEach(element => {
    observer.unobserve(element);
  });
}

这样在组件销毁时，会取消对所有动画元素的观察，防止重复触发动画。