Показать сообщение отдельно
  #2 (permalink)  
Старый 28.04.2016, 15:05
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 576

DynkanMaclaud, так?
<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style>
    #block {
      width: 300px;
      height: 300px;
      background: red;
    }
  </style>
</head>
<body>
  <div id="block"></div>
  <button onclick="slideUp(document.getElementById('block'), 2000)">Жми сюда</button>

  <script>
    function slideUp(elem, duration) {
      var begin = performance.now();
      var startHeight = elem.offsetHeight;

      window.requestAnimationFrame(function animate(now) {
        var progress = (now - begin) / duration;

        progress > 1 && (progress = 1);
        
        elem.style.height = (startHeight) ? startHeight - startHeight * progress + 'px' : elem.style.height = progress * 256 + 'px';

        progress < 1 && window.requestAnimationFrame(animate);
      });
    }
  </script>
</body>
</html>
Ответить с цитированием