Добавить эффект SlideDown в CSS модального закрытия

У меня есть этот стиль для моего модального окна, и мне интересно, где и как мне отменить эффект слайд-ап при закрытии модального окна.

var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
    modal.style.display = "block";
}
span.onclick = function() {
    modal.style.display = "none";
}
window.onclick = function(event) {
    if (event.target == modal) {
       modal.style.display = "none";
    }
}

.modal {
    display: none;
    position: fixed;
    overflow: hidden;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    background-color: black;
    color: white; 
    -webkit-animation: slideIn 0.4s;
    animation: slideIn 0.4s;   
}
@-webkit-keyframes slideIn {
    from {bottom: -300px; opacity: 0} 
    to {bottom: 0; opacity: 1}
}
@keyframes slideIn {
    from {bottom: -300px; opacity: 0}
    to {bottom: 0; opacity: 1}
}

.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

<div id = "myModal" class = "modal">

<span class = "close">&times;</span>

<p>Some content here</p>

</div>

В основном я хочу, чтобы модальное закрытие было таким же, как оно отображается (такая же анимация при открытии и закрытии модального окна, только чистый CSS). Может ли кто-нибудь помочь мне с этим?

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

— 26.09.2018 15:35

Я обновил вопрос @Pete

— 26.09.2018 16:20

css css-animations

26.09.2018 14:13

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

596

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я бы использовал переход, который применяется при добавлении и удалении класса:

.modal {
  position: fixed;
  overflow: hidden;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  background-color: black;
  color: white;
  transition: opacity 0.4s, bottom 0.4s;  /* animate these properties */
  opacity: 1;                             /* open state is shown */
}

.modal.closed {
  opacity: 0;     /* close state is hidden and off screen */
  bottom: -300px;
}

.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

<div id = "myModal" class = "modal closed">
  <span class = "close">&times;</span>
  <p>Some content here</p>
</div>

<div id = "myBtn">click me</div>

<script>
  var modal = document.getElementById('myModal');
  var btn = document.getElementById("myBtn");
  var span = document.getElementsByClassName("close")[0];

  btn.onclick = function(e) {
    e.stopPropagation();                    /* stop event bubbling up to window */
    modal.classList.remove("closed");
  }
  span.onclick = function() {
    modal.classList.add("closed");
  }
  window.onclick = function(event) {
    if (event.target != modal) {
      modal.classList.add("closed");
    }
  }
</script>

Я заметил, что show происходит, как и ожидалось, но hiding должен соответствовать быстрее, чем show

— 26.09.2018 17:00

Это потому, что ваша анимация составляет 0,4 секунды, а вы перемещаете баннер на 300 пикселей. Шоу точно такая же скорость, как и шкура

— 26.09.2018 17:01

26.09.2018 16:35