javascript - 当元素垂直居中时滚动添加内联 CSS

Question

我有一个带有 CSS 动画元素的 SVG。使用 animation-play-state 我让它们保持暂停状态，使用 jQuery 或 JavaScript 我想将其更改为仅在 SVG 在滚动条上垂直居中后才运行。

我的想法是捕获类 .paused 使它们全部暂停并用上述内联 CSS 覆盖它。

Answer 1

您可以通过添加两个不同的 css 类来实现您的要求。

.classA_animate{
   animation: animation_1 2s linear infinite;
}

到达滚动位置后，删除 classA_animate 并添加 classB_animate

.classB_animate{
   animation: animation_2 2s linear infinite;
}