Почему когда я нажимаю на скрыть
, дожидаюсь окончания анимации, и нажимая на показать
, анимация появления происходит не плавно? А вот если сначала нажать на показать
, анимация выполнится плавно.
window.addEventListener("load", function() {
var block = document.querySelector("#block");
var overlay = document.querySelector(".overlay");
document.querySelector(".hide").addEventListener("click", function() {
overlay.style.display = "block";
overlay.className = "overlay animation--slide-up";
setTimeout(function() {
block.className = "animation--scale-hide";
}, 1000);
}, false);
document.querySelector(".show").addEventListener("click", function() {
overlay.className = "overlay";
block.className = "scale-hidden animation--scale-show";
}, false);
}, false);
#block {
position: absolute;
left: 50%;
top: 50%;
width: 50px;
height: 50px;
background: green;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
#block .overlay {
position: absolute;
width: 50px;
height: 50px;
background: red;
}
<link rel="stylesheet" href="https://zaytcev.com/koval/wtalfiym/test.css" type="text/css">
<div id="block">
<div class="overlay"></div>
</div>
<br />
<button class="hide">скрыть</button>
<button class="show">показать</button>