Why when I click on скрыть , wait for the animation to end, and clicking on the показать animation does not appear smoothly? But if you first click on the показать , the animation will run smoothly.

  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>

    1 answer 1

    Probably you forgot to add a timer on the animation "Show".

    HTML unchanged

    Appearance animation add whatever you like (I made an example with a smooth )

     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() { block.style.display = "overlay"; block.className = "overlay animation--slide-up"; setTimeout(function() { overlay.className = "scale-hidden animation--scale-show"; }, 1000); }, false); }, false); 
     #block { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; max-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>

    • Is it possible by example? - ikerya
    • I think I will help you with @ikerya)) - ThusMad
    • @ThusMod thanks. You are a little confused, but I corrected and your decision helped me: pader.ru/share/d86hlw - ikerya