Плавное закрытие попапа

Question

Плавное закрытие попапа

Рейтинг: 2Ответов: 1Опубликовано: 19.07.2023

Всем привет! Подскажите как реализовать именно плавное закрытие попапа при удалении класса, который собственно попап и открывает. Удалось создать плавное появление попапа, а вот, чтобы он исчезал плавно не получается.

let edit_button = document.querySelector('.profile__edit-button');
let popup_opened = document.querySelector('.popup');
let close_button = document.querySelector('.popup__close-button');


edit_button.addEventListener('click', function () {
  popup_opened.classList.add("popup_opened")
});

close_button.addEventListener('click', function () {
  popup_opened.classList.remove("popup_opened");
});

Класс, который добавляется и удаляется через JS:

.popup_opened {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 98;
  animation-name: popup;
  animation-duration: 0.8s;
}

@keyframes popup {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

javascript всплывающее-окно

Источник: Stack Overflow на русском

Answer 1

▲ 1

Плавную анимацию открытия и закрытия попапа можно реализовать так:

let edit_button = document.querySelector('.profile__edit-button');
let popup_opened = document.querySelector('.popup');
let close_button = document.querySelector('.popup__close-button');


edit_button.addEventListener('click', function () {
  popup_opened.classList.add("popup_opened")
});

close_button.addEventListener('click', function () {
  popup_opened.classList.remove("popup_opened");
});

.popup {
  background: #0f0;
  width: 300px;
  height: 300px;
  transition: all .3s ease-in;
  visibility: hidden;
  opacity: 0;
}

.popup_opened {
  visibility: visible;
  opacity: 1;
}

<button class="profile__edit-button">Открыть попап</button>

<div class="popup">
  <button class="popup__close-button">Закрыть попап</button>
</div>

Плавное закрытие попапа

Ответы