Почему исчезает плавно, а появляется резко (transition: opasity)?

Question

[lolo_to]

Есть блок, который при нажатии на кнопку должен плавно исчезает и появляется благодаря js:

document.getElementsByTagName('div')[0].style.opacity = '0';
setTimeout(()=> {
    document.getElementsByTagName('div')[0].style.opacity = '1';
}, 1000);

div {
    transition: opacity 1s ease;
}

<div>
    <p>Привет, стиль..</p>
</div>

Но получается так, что он плавно только исчезает, а появляется - резко.

Подскажите пожалуйста, как это исправить.

Comments

[RAX7]

И что не так?

Answer 1

[WbICHA]

Либо уменьшить транзишн, либо увеличить таймаут. Если жс изменяет опасити до окончания анимации, то получается мгновенный переход.