[英]Triggering css animate class on scroll
I am using the animate.css classes on my page. 我正在页面上使用animate.css类。 Currently I have all animations built on hover function.
目前,我拥有所有基于悬停功能的动画。
For example: 例如:
#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: 我想滚动激活这些动画类,我的问题是:
What would be the easiest way to trigger this class using a Javascript function? 使用Javascript函数触发此类的最简单方法是什么?
This is the best I can do: http://codepen.io/zvona/pen/ovDbk 这是我能做的最好的事情: http : //codepen.io/zvona/pen/ovDbk
It will add class visible
to all the elements with className onAppear
. 它将使用className
onAppear
添加对所有元素visible
类。
So, you can add class for all the elements that you want to animate on appear: 因此,您可以为要在其上进行动画处理的所有元素添加类:
<div class="onAppear">This will be animated.</div>
And then on CSS (transition example, not animation - figure it out by yourself): 然后在CSS上(过渡示例,而不是动画-自己弄清楚):
.onAppear {
transition: transform 500ms;
}
.onAppear.visible {
transform: translate3d(250px, 0px, 0px);
}
Hope this helps. 希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.