Fijeralt123,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.simulator-QS__channel {
position: relative;
width: 50px;
height: 50px;
background: #000; }
.simulator-QS__application {
width: 20px;
height: 20px;
border-radius: 10px;
position: relative;
left: 15px;
bottom: -30px;
background: red;
}
.simulator-QS__application.app {
animation: valid-app 0.1s ease-in-out forwards;
}
.simulator-QS__application.leave {
animation: valid-app--leave 0.1s ease-in-out forwards; }
@keyframes valid-app {
from {
bottom: -30px;
left: 30px; }
to {
bottom: 0;
left: 15px; } }
@keyframes valid-app--leave {
from {
bottom: 0;
left: 15px; }
30% {
left: -15px;
opacity: 1; }
to {
bottom: -40px;
left: -30px;
opacity: 0; } }
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
var allApplications = document.getElementsByClassName("all-applications");
var validApplications = document.getElementsByClassName("valid-applications");
var invalidApplications = document.getElementsByClassName("invalid-applications");
function addCls(elem, cls, parent) {
return function() {
parent && parent.appendChild(elem);
elem.classList.add(cls)
}
}
let i = 20,
all = 0,
valid = 0,
invalid = 0,
simulatorQS = document.getElementsByClassName("simulator-QS"),
parent = simulatorQS[0];
function removeElem(elem, parent) {
return function() {
parent.removeChild(elem);
--i && simulationQS()
}
}
function simulationQS() {
all++;
allApplications[0].innerHTML = "Всего поступающих заявок: " + all;
var newApplication = document.createElement("div");
newApplication.className = "simulator-QS__application";
if (Math.random() < .5) {
valid++;
validApplications[0].innerHTML = "Заявки на обслуживание: " +
valid
} else {
invalid++;
invalidApplications[0].innerHTML = "Отказано в обслуживании: " + invalid
}
window.setTimeout(addCls(newApplication, "app", parent), 0);
window.setTimeout(addCls(newApplication, "leave"), 300);
window.setTimeout(removeElem(newApplication, parent), 450)
}
simulationQS()
});
</script>
</head>
<body>
<div class="simulator-QS">
<div class="simulator-QS__channel"></div>
</div>
<p class="all-applications"></p>
<p class="valid-applications"></p>
<p class="invalid-applications"></p>
</body>
</html>