CSS animation on JS ajax
A simple example of animation in css.
Animation examples can be found here:
https://daneden.github.io/animate.css/
Below is an example of how to make one of any animation from there or in general, so that everything works.
HTML
<div class=“message”>
<div class=“js-message animated pulse”> div>
div>
Container message needed to frame the animation so that inside it you can do with it what your soul wants.
js-message – the class that we will cling to in JS.
animated pulse – classes that describe the animation itself.
And we will have a class hidden, which will be hung and cleaned through JS. This will create an animation in the classes already present.
SCSS
margin: 10px 0;
text-align: center;
color: maroon;
position: relative;
// Required for animation!
display: block;
.animated {
position: absolute;
width: one hundred%;
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
An example of a function for sending a backpress request in wordpress jquery ajax. Animation will appear when receiving a response from the back.
Simplified the function as much as possible, left the most necessary for clarity.
Class hidden we hang by clicking on the link. And we shoot after the response arrives. Thus, animation occurs.
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’);
jQueryajax({
method : ‘post’,
dataType: ‘json’,
url : ajax.ajaxurl,
data : {
action: ‘increase’,
},
success : function () {
message.classList.remove(‘hidden’);
stop = true;
}
});
});
}();
![[Новичкам] Framework for creating a QA test plan](https://prog.world/wp-content/uploads/2022/07/e68a42973450d29ea7d18cf0fc8d6714-768x403.png)
