如何在水平布局中触发动画

Question

我想在水平布局中触发CSS动画，只有当动画元素进入视口时。我还希望它们每次进入视口时都被触发，而不仅仅是一次。

Answer 1

JavaScript Intersection Observer API可以观察元素在任何滚动方向上的位置，可以在元素进入/离开视口时对其执行操作，并可以在每次发生这些事件时重复这些操作。它非常高效，而且得到了很好的支持。以下是一个基本示例：

// Get an array of elements to watch
let elements = document.querySelectorAll('.foo');
// Set an observer to watch their position relative to the viewport boundaries
let observer = new IntersectionObserver(function (entries, self) {
entries.forEach(entry => {
// If this item is in the viewport
if (entry.isIntersecting) {
// Do some code on that item
entry.target.classList.toggle('animated');
}
});
}, { rootMargin: '0px 0px 0px 0px' });
// Tell each element to be watched
elements.forEach(el => {
observer.observe(el);
});