设置相同元素的按钮单击动画效果

Question

我有这样的 div 。 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>