我使用 animate.css 和 wow.js 来淡出滚动上的 div,但它会淡出然后再回来。我希望它淡出并远离。
我尝试添加“animated”类并且它可以工作,但在滚动到 div 时不起作用。一旦页面加载,它就会淡出。
这是我的笔:
http://codepen.io/omarel/pen/ozRzZJ
HTML
<div class="wrapper">
div placeholder
</div>
<div class="wrapper1 wow fadeOut" data-wow-duration="2s" data-wow-delay="2s">
test fade out
</div>
CSS
.wrapper {
background-color: #fff;
height: 200px;
}
.wrapper1 {
background-color: #000;
height: 500px;
}
JS
new WOW().init();
最佳答案
在 CSS 中的 wrapper1
div 上指定 animation-fill-mode:forwards;
将解决此问题。
animation-fill-mode
属性指定动画未播放时元素的样式。指定 forwards
将应用动画结束时的属性值。
例如:
new WOW().init();
.wrapper {
background-color: #fff;
height: 150px;
padding:20px;
}
.wrapper1 {
background-color: #000;
height: 500px;
animation-fill-mode: forwards;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
the black div below should fade out and stay out.
</div>
<div class="wrapper1 wow fadeOut" data-wow-duration="2s" data-wow-delay="2s">
test fade out
</div>
关于jquery - Wow.JS fadeOut 类但保持 div 淡出?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40292536/