Анимация перезагруза
Как можно сделать эффект обновления в этом коде? Код работает, но при нажатии 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>