Баг в анимации CSS

293

21 декабря 2016, 03:56

Почему когда я нажимаю на скрыть, дожидаюсь окончания анимации, и нажимая на показать, анимация появления происходит не плавно? А вот если сначала нажать на показать, анимация выполнится плавно.

  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>

Answer 1

Наверное вы забыли добавить таймер на анимацию "Показа".

HTML без изменений

Анимацию появления добавите какую вам угодно(я сделал пример с плавной)

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>