在滚动上触发css动画类

Question

我在我的页面上使用animate.css类。 目前我拥有基于悬停功能的所有动画。

例如：

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

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

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

Answer 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);
}

希望这有帮助。