Доброго времени суток!
пытаюсь сделать объектно ориентированное модальное окно, что бы
- в html было только 2 дива: overlay и modal, а все остальное генерилось из js.
- параметры можно было передавать
все хорошо работает, как мне кажется, на костылях, но работает. хотел сделать плавное проявление и скрытие окна,
сделал следующее:
при появлении
this.overlay.style.display = "block";
this.modal.style.display = "flex";
setTimeout(() => {
this.overlay.style.opacity = "1";
this.modal.style.opacity = "1";
}, 1); // без этой задержки не работает плавное появление
при удалении
this.overlay.style.opacity = "0";
this.modal.style.opacity = "0";
setTimeout(() => {
this.overlay.style.display = "none";
this.modal.style.display = "none";
}, this.fadeTime);
/* если задержка указана так - то окно пропадает сразу,
а если задержку указать явно (1000) - то через display:none случится только через 1 сек..*/
(transition так же задается, но в другом месте)
Так вот я не знаю почему setTimeout не хочет принимать this. поле и работать с ним.
Может есть смысл явно менять прозрачность через setInterval? и тогда заработает?
Еще думал использовать промисы, но я совсем не понял как их использовать, так что надо будет еще с промисами разобраться, прежде чем их использовать))
Спасибо за внимание
p.s. кому интересны мои костыли прошу:
https://codepen.io/Kononov_D/pen/rRwOBy?editors=1010
p.p.s за подсказки по оптимизации моего решения или "а лучше было бы сделать вот так, а не вот так" - буду очень благодарен!)
