javascript - 通过滚动触发 CSS 关键帧动画

Question

假设我有一个带有动画的元素:

#element {
  animation: Fade 3s linear 1s forwards;
}

@keyframes Fade {
  /* do stuff */
}

如何仅在用户向下滚动时触发此动画？ Vanilla JS、jQuery、ScrollMagic、GSAP/TweenMax，随心所欲。

添加动画属性本身会触发效果吗？因此，用户滚动到某个点/元素，然后我应用类似:$('#element').css('animation', 'Fade 3s linear 1s forwards');?

Answer 1

发布(并接受)的答案在技术上是正确的，但现在有更多性能友好的方法来实现这一点。如果您想在多个元素上触发动画，观看这些多个元素可能会导致性能不佳。查看 example this question .免责声明:这个问题也有我的答案，我只会在这个答案中复制自己的作品:

要以现代、高效的方式解决此问题，最好使用 Intersection Observer (IO)为此。

借助 IO，您可以观察一个(或多个)元素，并在它们进入视野或相互交叉时使用react。

要使用 IO，您首先必须为其设置选项，然后定义要监视的元素，最后定义 IO 触发后究竟发生了什么。

示例 ( Taken from here )，进行了一个最小的修改:即使动画尚未发生，作者也删除了 IO。我将 unobserve 调用移到检查元素是否可见的内部。

const SELECTOR = '.watched';
const ANIMATE_CLASS_NAME = 'animated';

const animate = element => (
  element.classList.add(ANIMATE_CLASS_NAME)
);

const isAnimated = element => (
  element.classList.contains(ANIMATE_CLASS_NAME)
);

const intersectionObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
    
    // when element's is in viewport,
    // animate it!
    if (entry.intersectionRatio > 0) {
      animate(entry.target);
      // remove observer after animation
      observer.unobserve(entry.target);
    }
  });
});

// get only these elements,
// which are not animated yet
const elements = [].filter.call(
  document.querySelectorAll(SELECTOR),
  element => !isAnimated(element, ANIMATE_CLASS_NAME)
);
//console.log(elements);

// start observing your elements
elements.forEach((element) => intersectionObserver.observe(element));

.h100 {
height: 100vh;
}

.watched {
 opacity: 0;
 transition: opacity .5s;
}

.watched.animated {
opacity: 1;
}

<div class="h100">
scroll down
</div>
<div class="watched">
I'm watched
</div>
<div class="h100">
Another element, keep scrolling
</div>
<div class="watched">
I'm also watched
</div>