Нужно сделать чтобы transition попапа работал и при открытии и при закрытии

Question

Нужно сделать чтобы transition попапа работал и при открытии и при закрытии, но у меня получилось сделать только при открытии, при закрытии по какой то причине не работает.

//Css
.setting-menu {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  transition: opacity .5s, padding .5s;
}
._setting-active {
  opacity: 1;
  visibility: visible;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  z-index: 5;
  padding: 5em 10em 2em 10em;
  background: rgba(16, 15, 13, .8);
}

//JS
const setting_btn = document.querySelector('.menu__setting');
const setting_menu = document.querySelector(".setting-menu");
const setting_closed = document.querySelector('.setting-menu__closed');

setting_btn.addEventListener("click", function(){
    setting_menu.classList.add("_setting-active");
});
setting_closed.addEventListener("click", function(){
    setting_menu.classList.remove("_setting-active");
});

Answer 1

На самом деле у вас всё получилось, если вы следовали комментарию @ArtemGorlachev, но вы сделали не всё:

резко пропадало при "закрытие" потому что background был прописан только в момент "активности", а в "обычном состояние" его не было, из-за чего был эффект резкого пропадания блока.
Позицию лучше прописывать заранее, то есть в "обычное состояние", т.к. при снятии "активности" позиция будет выставлена по дефолту.

const setting_btn = document.querySelector('.menu__setting');
const setting_menu = document.querySelector(".setting-menu");
const setting_closed = document.querySelector('.setting-menu__closed');

setting_btn.addEventListener("click", function() {
  setting_menu.classList.add("_setting-active");
});
setting_closed.addEventListener("click", function() {
  setting_menu.classList.remove("_setting-active");
});

.setting-menu {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity .5s, padding .5s;
  background: rgba(16, 15, 13, .8);
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

._setting-active {
  opacity: 1;
  pointer-events: all;
  z-index: 5;
  padding: 5em 10em 2em 10em;
}

.menu__setting,
.setting-menu__closed {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.menu__setting {
  background: green;
}

.setting-menu__closed {
  background: red;
  position: relative;
  z-index: 6;
}

<div class="menu__setting"></div>
<div class="setting-menu__closed"></div>
<div class="setting-menu"></div>

БЛОГ НА HUSL

Нужно сделать чтобы transition попапа работал и при открытии и при закрытии

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