Анимация перезагруза

Анимация перезагруза


Как можно сделать эффект обновления в этом коде? Код работает, но при нажатии refresh нет эффекта, и не понятно, изменилась что-нибудь, или нет

<a href="javascript://" id="recurl">refresh</a>

<div id="recomb">$COM_BODY$</div>

<script type="text/javascript">
  $('#recurl').click(function() {
    random = Math.floor(Math.random() * 9999);
    $.get('$REQUEST_URI$?' + random, function(data) {
      $('#recomb').html($('#recomb', data).html());
    });
  });
</script>




Для того, чтобы увидеть эффект, его нужно добавить

для примера добавим некий css, затем в скрипте после строчки click, добавляем наш css $('#recomb').addClass('flash');, чтоб увидеть "мерцание" на $COM_BODY$ (в конце удаляем)

Также не забудьте подключить библиотеку jQuery

$('#recurl').click(function() {
  //убираем для повторного срабатывания
  $('#recomb').removeClass('flash');
  setTimeout(function() {
    $('#recomb').addClass('flash'); //добавили
  }, 10);
  var random = Math.floor(Math.random() * 9999);
  $.get('$REQUEST_URI$?' + random, function(data) {
    $('#recomb').html($('#recomb', data).html());
    setTimeout(function() {
      $('#recomb').removeClass('flash'); //убрали
    }, 500);
  });
});
.recomb.flash {
  animation: flash 0.5s ease-in-out;
}

@keyframes flash {
  50%{color:#fff;text-shadow:0 -1px rgba(0,0,0,.3),0 0 5px #f03000,0 0 8px #f80000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<a href="javascript://" id="recurl">refresh</a>
<div id="recomb" class="recomb">$COM_BODY$</div>

 

Report Page