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

Question

[Денис]

Добрый день.
В обшем мне захотелось сделать модальное окно не просто например вот что то вроде этого https://codepen.io/chriscoyier/pen/MeJWoM с небольшой анимацией при появлении(в примере его нет но надеюсь вы поняли о чем я)
А с анимацией исчезновения. Так как toggle тут уже не помогает.
Вот так должно появлятся окно(ну ок это просто, при клике добавить

animation: test 1s linear;
@keyframes test {
 0% {
     transform: translateX(100%)
}
}

А вот так исчезать(движение вверх и исчезновение.


Второй шаг, исчезновение модалки ну никак не получается, пробовал и transition и display: none;

Кто может дать примеры, или объяснить какую последовательность действий мне нужно выполнить чтоб добится такого эфекта?
Хотелось бы использовать чистый Js, без использования jQuery

Answer 1

[h88p]

https://codepen.io/NKroe/pen/mYbYMj

Comments

[HelpSophie]

h88p ну вот и смысл в вашем ответе, если вы потом удаляете пены??

Answer 2

[forspamonly2]

последовательность следующая: по кнопке закрытия добавить модалке класс "закрывается", у которого прописана анимация уезда вверх, а в обработчике animationend убрать класс "закрывается" и добавить класс "закрыто" или вообще снести модалку из дома

Comments

[Денис]

попробую и ваш вариант, спасибо, не слышал про animationed