Установить эффект анимации при нажатии кнопки для того же элемента

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

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:

Примечание: применяется: активный селектортолько при нажатой кнопке.

Вы должны немного изменить html-код после использования active селектора.

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>

Answer 2

Вы можете использовать анимацию так:

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>