Перезагрузка после анимации эффекта на клик

Question

Я пытаюсь воспроизвести анимацию постэффектов, используя событие onclick в HTML, но не знаю, как это сделать. Анимация в своем собственном div.

Я не хочу перезагружать всю страницу, только анимацию Я подумал, может быть, попробовать какой-то JavaScript

        $(function() {
        document.getElementById("ANAnimation").onclick = function () {

        }
    })

Я думал, может быть, какой-то javascript

Answer 1

Вы можете использовать функции Callback (), чтобы повторить ту же анимацию.Ниже приведен пример в jQuery -

$("#element").animate({
  // stuff to animate
}, function() {
  // callback function
});

Answer 2

у вас есть два варианта

а) снова создать узел animate1

б) вы можете использовать класс CSS и переназначить его с небольшой задержкой. (setTimeout) animate2

function animate1(el) {
  var newEl = el.cloneNode(true);
  el.parentNode.replaceChild(newEl, el);
}
function animate2(el) {
  el.className = '';
  setTimeout(function(){el.className = 'myAnimation'}, 100);
}

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

.myAnimation {
  animation-name: example;
  animation-duration: 4s;
}

<div id="AnimationA" class="myAnimation" onClick="animate1(this)">Solution A</div>
<br />
<div id="AnimationB" class="myAnimation" onClick="animate2(this)">Solution B</div>