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); }); } };如何重复动画

要实现重复动画，可以在观察器的回调函数中添加一个逻辑，当元素完全离开视口时，将其类名去除，以便下次重新观察。

以下是修改后的代码示例：

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);
        } else {
          const animateClass = entry.target.getAttribute('data-animate');
          entry.target.classList.remove(animateClass);
        }
      });
    }, options);
    const elements = document.querySelectorAll('.animate');
    elements.forEach(element => {
      observer.observe(element);
    });
  }
};

现在，当元素完全离开视口时，观察器会将其类名去除。当元素再次进入视口时，观察器会重新添加类名，从而重新触发动画。