淡入淡出按钮单击

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的功能 这里是进出的切换按钮的效果淡出的代码。 可以调整通过改变（1000）的时间jQuery中感谢您

$(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>