How to make a custom delay in setTimeout?

Question

JavaScript

Good day!
I'm trying to make an object oriented modal window that would

• in html there were only 2 divs: overlay and modal, and everything else was generated from js.
  
• parameters can be passed
  

everything works well, it seems to me, on crutches, but it works. I wanted to make a smooth showing and hiding of the window, I
did the following:
when the

this.overlay.style.display = "block";
    this.modal.style.display = "flex";

    setTimeout(() => {
      this.overlay.style.opacity = "1";
      this.modal.style.opacity = "1";
    }, 1); // без этой задержки не работает плавное появление

when removed

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 is also set, but in a different place)
So I don't know why setTimeout doesn't want to accept this. field and work with it.
Maybe it makes sense to explicitly change the transparency through setInterval? and then it will work?
I also thought about using promises, but I didn’t understand how to use them at all, so I’ll have to deal with promises before using them))
Thank you for your attention
ps who are interested in my crutches, please:
https://codepen.io/Kononov_D/pen /rRwOBy?editors=1010
pps for tips on optimizing my solution or "it would be better to do it like this, not like this" - I will be very grateful!)

Answer 1

It seems to me that there is an error in scope. In this block, there is simply no fadeTime in this