@KononovD

Как сделать кастомную задержку в setTimeout?

Доброго времени суток!

пытаюсь сделать объектно ориентированное модальное окно, что бы
  • в 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 за подсказки по оптимизации моего решения или "а лучше было бы сделать вот так, а не вот так" - буду очень благодарен!)
  • Вопрос задан
  • 122 просмотра
Пригласить эксперта
Ответы на вопрос 1
@alexejshevchenko
Full-stack
Мне кажется, что тут ошибка в scope. В этом блоке в this просто нет fadeTime
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы