在滚动时触发css动画类

【问题标题】：Triggering css animate class on scroll在滚动时触发css动画类
【发布时间】：2014-08-14 03:54:03
【问题描述】：

我在我的页面上使用 animate.css 类。目前我所有的动画都建立在悬停功能上。

例如：

#folder:hover .middle-button{
            animation-name: slideRight;
            animation-duration: 1s; 
            animation-timing-function: ease-in-out;     
            visibility: visible !important; 
        }

我想在滚动时激活这些动画类，我的问题是：

使用 Javascript 函数触发此类的最简单方法是什么？

【问题讨论】：

Trigger events when the window is scrolled to certain positions的可能重复
我假设您想在元素出现在视口上时添加类？
是的，这是正确的。所以我想在元素出现在视口上时添加一个类。我在页面上有几个使用不同动画的 div 类。每个 div 的动画已经添加到 CSS 表上，我只需要了解如果元素出现在视口上，如何触发这些动画类。

标签： javascript css class animation scroll

【解决方案1】：

这是我能做的最好的：http://codepen.io/zvona/pen/ovDbk

它将类visible添加到所有className为onAppear的元素。

因此，您可以为要在其上显示动画的所有元素添加类：

<div class="onAppear">This will be animated.</div>

然后是 CSS（过渡示例，不是动画 - 自己弄清楚）：

.onAppear {
  transition: transform 500ms;
}

.onAppear.visible {
  transform: translate3d(250px, 0px, 0px);
}

希望这会有所帮助。

【讨论】：

太好了，我现在可以使用它了，正如您在此处看到的那样：codepen.io/anon/pen/Afqza 现在的问题是我只想在视口上设置句柄类元素，现在整个 SVG 都可以制作动画了.有什么想法可以解决这个问题吗？