JavaScript — переход Css и setTimeout

Css transition и setTimeout

У меня есть элемент сообщения, который я добавляю на свою страницу в функции:

  const markup = `{amp}lt;div class="todolist__message todolist__message${status? "--ok":"--err"}"{amp}gt;${msg}{amp}lt;/div{amp}gt;`; elements.tdl.insertAdjacentHTML('beforeend', markup); if(fade) { const message = document.querySelector('.todolist__message'); // Change the message opacity message.style.opacity = '0'; // Remove the message element setTimeout(() ={amp}gt; { document.querySelector('.todolist__message').parentElement.removeChild(message); }, 2000); } 

и я добавляю свойства CSS:

  opacity: 1; transition: opacity 1s; 

Что я не понимаю, так это то, почему, когда я изменяю непрозрачность сообщения на 0, переход не работает, и элемент мгновенно исчезает?

Я должен переписать код, поместив изменение стиля в setTimeout, и добавить дополнительный setTimeout для удаления элемента:

 const markup = ` {amp}lt;div class="todolist__message todolist__message${status? "--ok":"--err"}"{amp}gt;${msg}{amp}lt;/div{amp}gt; `; elements.tdl.insertAdjacentHTML('beforeend', markup); if(fade) { setTimeout(() ={amp}gt; { const message = document.querySelector('.todolist__message'); // Change the message opacity message.style.opacity = '0'; // Remove the message setTimeout(() ={amp}gt; document.querySelector('.todolist__message').parentElement.removeChild(message), 2000); }, 2000); } 

Кто-нибудь возражает объяснить, почему первый блок кода приводит к тому, что сообщение мгновенно исчезает, а не применяется переход css?

Спасибо

** См. Ответ ниже, чтобы узнать, как удалить элементы после завершения анимации.

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector