как сделать плавное открытие и закрытие модалки?

Question

Что я хочу?

Я хочу сделать с помощью 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" onclick="showModal('add-task-form')">
    <img src="./img/icons/plus.png" alt="add" />
</div>

<div class="modal add-task-form">
   <div class="modal__wrapper">
     <div class="modal__close" onclick="closeModal.call(this)"></div>
   </div>
</div>

Answer 1

HTML

    <div class="btn"></div>
    <div class="popap"></div>

CSS

 .btn {
            width: 200px;
            height: 35px;
            background-color: #eee;
            cursor: pointer;
            margin: 10px 0;
        }

        .popap {
            display: none;
            width: 200px;
            height: 150px;
            background-color: #446ec2;
            margin: 10px 0;
            transition: 0.3s;
        }

        .popap.active {
            display: block;
        }

JS

 const btn = document.querySelector('.btn')
        const popap = document.querySelector('.popap')
        btn.addEventListener('click', function (e) {
            if(popap.classList.contains('active')){
                popap.style.opacity = 0
                setTimeout(()=>{
                    popap.classList.remove('active')
                },300)
                
            }else{
                popap.style.opacity = 0
                popap.classList.add('active')
                setTimeout(()=>{
                    popap.style.opacity = 1
                },0)
            } 
        })

БЛОГ НА HUSL

как сделать плавное открытие и закрытие модалки?

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