Как задать плавное появление и исчезновение блока?

Question

Написал код, который при нажатии на кнопку элемент плавно выходит из края экрана:

css

.direct-chat {
  display: none;
  position: fixed;
  bottom: 5px;
  right: 5px;
  max-width: 320px;
  z-index: 2;
  transform: translateX(0);
  animation: ani 0.5s ease;
}

@keyframes ani {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

html

<a href="#" class="dialog">Перейти к диалогу</a>
<div class="card card-primary card-outline direct-chat direct-chat-primary" id="chatWithAdmin">
...
<button type="button" class="btn btn-tool close_btn">
    <i class="fas fa-times"></i>
</button>
...
</div>

JavaScript

$(document).ready(function () {
            var Modal = document.getElementById('chatWithAdmin');
            var dialog_link = document.querySelector('.dialog');
            var close_info = document.getElementsByClassName('close_btn')[0];

            dialog_link.onclick = function () {
                Modal.style.display = "block";
            }

            close_info.onclick = function ()
            {
                setTimeout(function () {Modal.style.display = "none"}, 500);

            }
        });

Плавное появление сделать-то сделал, а вот как сделать так, чтобы при нажатии на крестик (класс close_btn), он так же плавно уходил обратно за экран и получал стиль "display: none"?

Answer 1

Самый простой способ реализации, который пришёл на сонную голову)

var modal = document.querySelector('.modal');

function ModalAnim(type) {
  if(type === 'show') {
    modal.addEventListener('animationend', function() {
      modal.classList.add('modal--show');
      modal.classList.remove('modal--anim-show');
    });
    modal.classList.add('modal--anim-show');
  } else if(type === 'hide') {
    modal.addEventListener('animationend', function() {
      modal.classList.remove('modal--show');
      modal.classList.remove('modal--anim-hide');
    });
    modal.classList.add('modal--anim-hide');
  }
}

.modal {
  display: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0, .8);
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
}

.modal--show {
  display: flex;
}

.modal .content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 50px;
  background: #fff;
}

.modal--anim-show {
  display: flex;
  animation: modal-show 1s linear forwards;
  pointer-events: none;
}

.modal--anim-hide {
  animation: modal-hide 1s linear forwards;
  pointer-events: none;
}

@keyframes modal-show {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

@keyframes modal-hide {
  0% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(0);
  }
}

<input type="button" value="show" onclick="ModalAnim('show')">

<div class="modal">
  <div class="content">
    <input type="button" value="hide" onclick="ModalAnim('hide')">
  </div>
</div>

БЛОГ НА HUSL

Как задать плавное появление и исчезновение блока?

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