как сделать плавное открытие и закрытие модалки?
Что я хочу?
Я хочу сделать с помощью transition или анимации плавное открытие и закрытие, то-есть сперва появляется модалка и враппер. Потом при закрытии сперва уходит враппер и потом скрывается модалка.
function showModal(modalClassName) {
const modal = document.querySelector(`.${modalClassName}`);
modal.classList.add("show");
}
function closeModal() {
const modal = this.closest(".modal");
modal.classList.remove("show");
}
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
background-color: rgba($color: #000000, $alpha: 0.5);
transition: 0.3s ease;
visibility: hidden;
&.show {
visibility: visible;
.modal__wrapper {
opacity: 1;
transform: translateY(0);
}
}
&__wrapper {
position: relative;
width: 90%;
height: 90%;
margin: auto;
background-color: #fff;
border-radius: 10px;
transition: 0.3s ease 0.3s;
opacity: 0;
transform: translateY(-50px);
}
&__close {
position: absolute;
top: -14px;
right: -14px;
width: 28px;
height: 28px;
background-color: #000000;
border-radius: 50%;
background-image: url(../img/icons/close.png);
background-repeat: no-repeat;
background-size: 60% 60%;
background-position: center;
cursor: pointer;
}
}
<div class="add-task-btn">
<img src="./img/icons/plus.png" alt="add" />
</div>
<div class="modal add-task-form">
<div class="modal__wrapper">
<div class="modal__close"></div>
</div>
</div>
Источник: Stack Overflow на русском