Открытие модального окна с анимацией?

Question

[lavezzi1]

Здравствуйте. Нужно анимировать модалку которая лежит со стилем display: none; В какую сторону копать? Может есть какие то примеры?

PS Чистый js.

Comments

[Антон]

opacity:0 => opacity: 1

[lavezzi1]

Антон, при открытие - ок. А как при закрытии?

[SergejDudn]

lavezzi1, При закрытии можно opacity: 0 и через setTimeout скрывать блок

[lavezzi1]

SergejDudn, facepalm.

[SergejDudn]

facepalm?

[lavezzi1]

SergejDudn, Ага. setTimeout() использовать для этой задачи - костыль. Потому что пользователь может поменять transition-duration, а твой setTimeout выставленный в 50ms об этом и не узнает. Нужно подписываться на transitionend и после этого закрывать блок через display: none; Просто ищу адекватный и грамотный пример.

[SergejDudn]

Да, верно, придется задавать вручную, но достаточно много плагинов для модалок, у которых это время задается в настройках, тот же MagneficPopup.
Но можно в data атрибут вынести эту задержку или еще куда-нибудь