为同一元素单击按钮时设置动画效果

Question

我有这样的股利。 H1标签基于单击按钮动态显示数据。

    <div id="quoteId" >
          <h1>{{ data }}</h1>
        </div>
<button>Show Next</button>

使用css3动画效果作为

#quoteId {
    opacity: 1;
    animation-name: example;
    animation-duration: 1s;
}
@keyframes example {
    0%   {opacity: 0;}
    50%  {opacity: 1;}
    100% {opacity: 1;}
}

它是第一次工作。 但是问题是每次我们单击按钮时如何实现相同的CSS效果。 如有任何疑问，请通知我。 提前致谢。

Answer 1

您可以像这样重用动画：

 let but = document.getElementById("button"); let div = document.getElementById("quoteId"); but.addEventListener('click', function(){ div.classList.add("quote"); setTimeout(() => div.classList.remove("quote"), 1000); }); 

 .quote { opacity: 1; animation-name: example; animation-duration: 1s; } @keyframes example { 0% {opacity: 0;} 50% {opacity: 1;} 100% {opacity: 1;} } 

 <div id="quoteId"> <h1>{{ data }}</h1> </div> <button id="button">Show Next</button> 

Answer 2

A）使用jQuery：

$("#quoteId").toggleClass('anime reve');

 $(document).ready(function(){ $('button').click(function(){ $("#quoteId").toggleClass('anime reve'); }) }) 

 .anime { animation-name: example; animation-duration: 5s; } .reve { animation-name: reve; animation-duration: 5s; } @keyframes example { 0% {opacity: 0;} 50% {opacity: 1;} 100% {opacity: 1;} } @keyframes reve { 0% {opacity: 0;} 50% {opacity: 1;} 100% {opacity: 1;} } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div id="quoteId" class="reve" > <h1>{{ data }}</h1> </div> <button>Show Next</button> 

B）使用纯CSS：

注意：：active选择器仅在按下按钮时适用。

使用active选择器后，您必须稍微更改html代码。

button:active + #quoteId {
  animation-name: example;
  animation-duration: 20s;
}

 @keyframes example { 0% {opacity: 0;} 50% {opacity: 1;} 100% {opacity: 1;} } button:active + #quoteId { animation-name: example; animation-duration: 1s; } .container { position: relative; padding-bottom: 20px; } button { position: absolute; bottom: 0; } 

 <div class="container"> <button>Show Next</button> <div id="quoteId"> <h1>{{ data }}</h1> </div> </div>