javascript - 在滚动时触发 css animate 类

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

它将向所有具有类名onAppear 的元素添加类visible。

因此，您可以为所有要在出现时设置动画的元素添加类:

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

然后在 CSS 上(过渡示例，不是动画 - 自己弄清楚):

.onAppear {
  transition: transform 500ms;
}

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

希望这对您有所帮助。