Wow.JS fadeOut class 但保持 div 淡出？

Question

我正在使用 animate.css 和 wow.js 在滚动时淡出 div，但它淡出然后又回来。我希望它淡出并远离。

我试过添加 class "animated" 并且它有效，但在滚动到 div 时不起作用。一旦页面加载，它就会淡出。

这是我的笔：

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();

Answer 1

在 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>

Wow.JS fadeOut class 但保持 div 淡出？

Wow.JS fadeOut class but keep div faded out?

jquery

css

animate.css

wow.js