上滚动触发CSS动画类 [英] Triggering css animate class on scroll

问题描述

我用我的网页上animate.css类。
目前，我已经建立了悬停功能的所有动画。

I am using the animate.css classes on my page. Currently I have all animations built on hover function.

例如：

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

我想激活滚动这些动画类和我的问题是：

I would like to activate these animation classes on scroll and my question is:

什么是使用JavaScript函数来触发这个类的最简单的方法？

What would be the easiest way to trigger this class using a Javascript function?

推荐答案

这是我能做的最好的：的 HTTP：//$c$cpen.io/zvona/pen/ovDbk

This is the best I can do: http://codepen.io/zvona/pen/ovDbk

这将增加类可见来所有的className元素 onAppear 。

It will add class visible to all the elements with className onAppear.

所以，你可以为所有要设置动画的元素添加类表现为：

So, you can add class for all the elements that you want to animate on appear:

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

然后在CSS（过渡的例子，而不是动画 - 自己看着办吧）

And then on CSS (transition example, not animation - figure it out by yourself):

.onAppear {
  transition: transform 500ms;
}

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

希望这有助于。

这篇关于上滚动触发CSS动画类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！