В DOM-записывается новый элемент, затем по истечению 2-х секунд он удаляется. Как анимировать этот элемент в момент удаления из DOM? Например, чтобы блок равномерно исчезал словно растворяется. Интересует наиболее правильный и простой пример.
var warningEl = document.createElement('div');
warningEl.setAttribute('class', 'warning');
var message = document.createTextNode('Какое-то сообщение');
warningEl.appendChild(message);
var container = document.getElementsByClassName('container')[0];
container.appendChild(warningEl);
function animate() {
container.removeChild(warningEl);
}
setTimeout(animate, 2000);
}
css
.warning {
opacity: 1;
transition-property: opacity;//какое свойство анимировать
transition-duration: 2s;//длительность анимации
transition-timing-function: ease;//на сколько быстро должно изменяться значение стилевого свойства для которого применяется эффект перехода
}
transitionend
... говорит само за себя. Подпишитесь на него, и удалите блок после возникновения этого событияaddEventListener