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

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）使用Pure Css：

  

注意：仅在按下按钮时应用：活动选择器。

使用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>