当用户滚动到该部分时，如何使用JS (无库)激活CSS动画？

.animated {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.animated.active {
  opacity: 1;
}

const element = document.getElementById("myElement");

function activateAnimation() {
  const element = document.getElementById("myElement");
  const rect = element.getBoundingClientRect();
  const windowHeight = window.innerHeight || document.documentElement.clientHeight;

  if (rect.top <= windowHeight && rect.bottom >= 0) {
    element.classList.add("active");
  }
}

window.addEventListener("scroll", activateAnimation);