Как добавить анимацию к модальному окну js?

Question

Подскажите пожалуйста, как добавить простую анимацию к popup плавно показать его и скрыть

Код ниже:

function bindModal(triggerSelector, modalSelector, closeSelector) {
    const trigger = document.querySelectorAll(triggerSelector),
          modal = document.querySelector(modalSelector),
          close = document.querySelector(closeSelector);

    trigger.forEach(item => {
        item.addEventListener('click', (e) => {
            if (e.target) {
                e.preventDefault();
            }

            modal.style.display = "block";
            document.body.style.overflow = "hidden";
        });
    });

    close.addEventListener('click', () => {
        modal.style.display = "none";
        document.body.style.overflow = "";
    });

    modal.addEventListener('click', (e) => {
        if (e.target === modal) {
            modal.style.display = "none";
            document.body.style.overflow = ""; 
        }
    });
}

function showModalByTime(selector, time) {
    setTimeout(function() {
        document.querySelector(selector).style.display = 'block';
        document.body.style.overflow = "hidden";
    }, time);
}

bindModal('.popup_lk', '.popup', '.popup .popup__close');

.popup {
    display: none;
    }

    <button type="button" class="popup_lk">Открыть</button>

    <div class="popup">
            <div class="popup-lk__dialog">
                <div class="popup-lk__content">
                    <button type="button" class="popup__close">
                        <svg width="32" height="35" viewBox="0 0 32 35" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M29.0503 33.4494L31.3288 31.0167L18.2278 17.0289L31.329 3.04086L29.0505 0.60818L15.9493 14.5962L2.27846 0L0 2.43268L13.6709 17.0289L0.000239357 31.6248L2.27869 34.0575L15.9493 19.4616L29.0503 33.4494Z" fill="white" />
                        </svg>
                    </button>
                    Контент
                </div>
            </div>
        </div>

Answer 1

Вот как вариант, с добавлением/удалением дополнительного класса. Анимация уже на ваше усмотрение. Пример:

function bindModal(triggerSelector, modalSelector, closeSelector) {
  const trigger = document.querySelectorAll(triggerSelector),
    modal = document.querySelector(modalSelector),
    close = document.querySelector(closeSelector);

  trigger.forEach(item => {
    item.addEventListener('click', (e) => {
      if (e.target) {
        e.preventDefault();
      }

      //modal.style.display = "block";
      modal.classList.add('popup_active');
      document.body.style.overflow = "hidden";
    });
  });

  close.addEventListener('click', () => {
    //modal.style.display = "none";
    modal.classList.remove('popup_active');
    document.body.style.overflow = "";
  });

  modal.addEventListener('click', (e) => {
    if (e.target === modal) {
      modal.style.display = "none";
      document.body.style.overflow = "";
    }
  });
}

function showModalByTime(selector, time) {
  setTimeout(function() {
    document.querySelector(selector).style.display = 'block';
    document.body.style.overflow = "hidden";
  }, time);
}

bindModal('.popup_lk', '.popup', '.popup .popup__close');

.popup {
  /*display: none;*/
  transition: transform 500ms cubic-bezier(0.465, 0.183, 0.153, 0.946);
  transform: translate(0, -1000px)
}

.popup_active {
  transform: translate(0, 0)
}

<button type="button" class="popup_lk">Открыть</button>

<div class="popup">
  <div class="popup-lk__dialog">
    <div class="popup-lk__content">
      <button type="button" class="popup__close">
                        <svg width="32" height="35" viewBox="0 0 32 35" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M29.0503 33.4494L31.3288 31.0167L18.2278 17.0289L31.329 3.04086L29.0505 0.60818L15.9493 14.5962L2.27846 0L0 2.43268L13.6709 17.0289L0.000239357 31.6248L2.27869 34.0575L15.9493 19.4616L29.0503 33.4494Z" fill="white" />
                        </svg>
                    </button> Контент
    </div>
  </div>
</div>

БЛОГ НА HUSL

Как добавить анимацию к модальному окну js?

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