Wow.JS fadeOutクラスですが、divをフェードアウトしますか？

Question

私はwow.jsでanimate.cssを使ってスクロールのdivをfadeOutしていますが、フェードアウトしてから戻ってきます。私はそれを消して離れていきたいです。

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

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>