ボタンのフェードインとアウトクリック

Question

このフェードインとアウトアニメーションのCSSスタイリングはうまく見えますが、JavaScriptでは再利用できません。関数が一度実行されると、ボタンonClickによって再度トリガすることはできませんが、これを回避する方法は何ですか？

//removeClass 
 
//addClass

.elementToFadeInAndOut { 
 
    width:200px; 
 
    height: 200px; 
 
    background: red; 
 
    -webkit-animation: fadeinout 4s linear forwards; 
 
    animation: fadeinout 4s linear forwards; 
 
    opacity: 0; 
 
} 
 

 
@-webkit-keyframes fadeinout { 
 
    50% { opacity: 1; } 
 
} 
 

 
@keyframes fadeinout { 
 
    50% { opacity: 1; } 
 
}

<button onClick="animationfunction()">Button</button> 
 
<div id="icon" class="elementToFadeInAndOut"></div>

Answer 1

あなただけのアニメーションは、クラスを削除し、その後完全であるまで待って、クラスのメンバーシップを追加]ボタンをクリックする必要があります。

var div = document.querySelector(".fade"); 
 
var btn = document.querySelector(".fadeButton"); 
 
btn.addEventListener("click", function(){ 
 
    div.classList.add("elementToFadeInAndOut"); 
 
    // Wait until the animation is over and then remove the class, so that 
 
    // the next click can re-add it. 
 
    setTimeout(function(){div.classList.remove("elementToFadeInAndOut");}, 4000); 
 
});

.fade{ 
 
    width:200px; 
 
    height: 200px; 
 
    background: red; 
 
    opacity:0; 
 
} 
 

 
.elementToFadeInAndOut { 
 
    animation: fadeInOut 4s linear forwards; 
 
} 
 

 
@keyframes fadeInOut { 
 
0% { opacity:0; } 
 
50% { opacity:1; } 
 
100% { opacity:0; } 
 
}

<button class="fadeButton">Button</button> 
 
<div class="fade"></div>

Answer 2

最良の方法は、ここでは機能 のためのjQueryを使用することであるトグルボタンの効果フェードインとフェードアウトのためのコードです。 あなたはjQueryの中で（1000）のことを変更することで、時間を調整することができ

$(document).ready(function(){ 
 
\t \t \t \t $('button.btn').click(function(){ 
 
\t \t \t \t \t $("div.elementToFadeInAndOut").fadeOut(1000); 
 
      $("div.elementToFadeInAndOut").fadeIn(1000); 
 
\t \t \t \t }); 
 
\t \t \t \t });

.elementToFadeInAndOut { 
 
    width:200px; 
 
    height: 200px; 
 
    background: red; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<button class="btn">Button</button> 
 
<div class="elementToFadeInAndOut"></div>