const elements = [ { elem: document.querySelector("#elemt"), observer: new IntersectionObserver(observerCallback), }, ]; // 定义回调函数 function observerCallback(entries) { entries.forEach((entry) => { // 如果元素进入视窗，执行动画 if (entry.isIntersecting) { entry.target.classList.add("animate"); } else { // 如果元素离开视窗，取消动画 entry.target.classList.remove("animate"); } }); } // 开始观察元素 elements.forEach(({ elem, observer }) => observer.observe(elem));如何只执行一次

要实现只执行一次动画，你可以在动画执行后，通过 `setTimeout` 函数来取消观察元素。代码如下所示：

const elements = [
  {
    elem: document.querySelector("#elemt"),
    observer: new IntersectionObserver(observerCallback),
  },
];

function observerCallback(entries, observer) {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add("animate");
      setTimeout(() => {
        entry.target.classList.remove("animate");
        observer.unobserve(entry.target);
      }, 1000);  // 1秒后取消观察元素
    } else {
      entry.target.classList.remove("animate");
    }
  });
}

elements.forEach(({ elem, observer }) => observer.observe(elem));

在上述代码中，我设置了 1 秒钟的延迟，等待动画执行完毕后再取消观察元素。这样动画就只会执行一次了。