Как сделать плавное появление блока при нажатии на кнопку

Question

Нужно сделать так, что бы при нажатии на кнопку сверху выезжал блок на середину страницы. Как такое можно сделать? Буду рад помощи.

Answer 1

Допустим так

document.getElementById('open').addEventListener('click', function(){
  document.getElementById('overlay').classList.add('--show');
});

#overlay {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 9990;
  transition: all .5s linear;
  transform: translateY(-100%);
}

#overlay.--show {
  transform: translateY(0%);
}

.modal {
  display: block;
  width: 150px;
  height: 100px;
  background: gray;
}

<button id="open">Open</button>

<div id="overlay">
  <div class="modal"></div>
</div>

БЛОГ НА HUSL

Как сделать плавное появление блока при нажатии на кнопку

Ответы (1 шт):