var btn = document.querySelector('button'); btn.addEventListener('click', popup); function popup() { var popwin = document.createElement('div'); document.body.append(popwin); setTimeout(popclose, 2000); function popclose() { for (var i=0; i<100; i++); { popwin.style.backgroundColor = 'rgba(123, 204, 91,',i/100,');'; if (i >= 100) { popwin.remove(); }; }; } } 
 div { background-color: rgba(123, 204, 91, 0.5); width: 200px; height: 100px; } 
 <button>Кнопка</button>

There is such an attempt to make a smooth extinction of the window, but for some reason it does not work, what am I doing wrong?

    1 answer 1

    Decreasing the value through the cycle is somehow too difficult.

    It is more correct to add the css-class in the script, and not the style to the element.

    You need to make a class, for example with opacity: 0, and the disappeared div transition.

    First add a class, div slowly fades out, then just remove the element.

    Something like this:

     var btn = document.querySelector("button"); btn.addEventListener("click", popup); function popup() { var popwin = document.createElement("div"); document.body.append(popwin); setTimeout(pophide, 1500); function pophide() { popwin.classList.add("foo"); setTimeout(popclose, 2500); } function popclose() { popwin.remove(); } } 
     div { background-color: rgba(123, 204, 91, 0.5); width: 200px; height: 100px; opacity: 1; transition: opacity 1s; } .foo { opacity: 0; } 
     <button>Кнопка</button>

    You can also change the height so that the elements do not gallop.