Простой пример анимации на css.
Примеры анимации можно найти здесь:
https://daneden.github.io/animate.css/
Ниже пример, как сделать одну из любой анимации оттуда или вообще, чтобы все работало.
HTML
<div class="js-message animated pulse"></div>
</div>
Контейнер message нужен для обрамления анимации, чтобы внутри него можно было с ней делать, что душе захочется.
js-message — класс, за который будем цепляться в JS.
animated pulse — классы, которые описывают саму анимацию.
И еще у нас будет класс hidden, который буде вешаться и убираться через JS. Это создаст анимацию в уже присутствующих классах.
SCSS
margin: 10px 0;
text-align: center;
color: maroon;
position: relative;
// Обязательно для анимации!
display: block;
.animated {
position: absolute;
width: 100%;
top: 0px;
animation-duration: 3s;
animation-fill-mode: both;
}
.pulse {
-webkit-animation-name: pulse;
animation-name: pulse;
}
@keyframes pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
}
JS
Пример функции отправки в wordpress jquery ajax запроса на бэк. Анимация будет появляться при получении ответа с бэка.
Функцию максимально упростил, оставил самое нужное для наглядности.
Класс hidden мы навешиваем при нажатии на ссылку. А снимаем после прихода ответа. Тем самым происходит анимация.
let link = document.querySelector('.js-link');
if (!link) {
return;
}
let message = document.querySelector('.js-message'),
stop = false;
link.addEventListener('click', function (e) {
if (stop) {
return;
}
let current = e.target,
currentClass = current.classList.contains('js-link');
if (!currentClass) {
return;
}
message.classList.add('hidden');
jQuery.ajax({
method : 'post',
dataType: 'json',
url : ajax.ajaxurl,
data : {
action: 'increase',
},
success : function () {
message.classList.remove('hidden');
stop = true;
}
});
});
}();
