Как плавно показать блок с «transition» после его создания?

Question

[R Z]

Как плавно и без костылей показать блок после того как я его создал при помощи createElement?
Вся суть в том, что я создал блок, добавил ему стили включая вот такие: transition: opacity 1s; opacity: 0
После всего этого добавил созданный элемент на страницу и затем изменил свойство с opacity: 0 на 1, но анимации нет. Ясное дело, что браузер пытается все это дело оптимизировать и т.к. изменения стилей произошли в одном потоке, то стили изменились до того как были добавлены на страницу, но мне от этого не легче.
Можно ли как то и без костылей решить сей недуг?
Я большинство тонкостей по части CSS не знаю, может у вас есть какие соображения?

Answer 1

[0xD34F]

<button>add</button>

document.querySelector('button').addEventListener('click', function() {
  document.body.appendChild(document.createElement('div'));
});

div {
  height: 50px;
  margin: 5px;
  background: red;
  animation: show-div 3s;
}
@keyframes show-div {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Comments

[R Z]

Спасибо, добрый человек.
Все никак не мог себя заставить почитать о том как работают ключевые кадры. В общем, вы вынудили меня сегодня этим заняться)

Answer 2

[kulaeff]

Вариант с animation вам уже показал товарищ 0xD34F. Если нужен именно transition, то вы создаете блок, у которого изначально в CSS указан opacity: 0, затем через маленький промежуток времени вы задаете opacity: 1. В коде это будет примерно так:

div {
  opacity: 0;
}
div.active {
  opacity: 1;
}

var div = document.createElement('div')

document.body.appendChild(div)

setTimeout(function() {
  div.classList.add('active');
}, 10)

Вместо setTimeout можно использовать requestAnimationFrame. Если вы используете jQuery, то там есть функция animate() или связка функций queue()\dequeue().

Пример

Comments

[R Z]

Не сложно было догадаться, что через setTimeout можно добиться желаемого мной результата.
В любом случае спасибо.
Кстати, давным давно читал о requestAnimationFrame, сейчас освежу память, может найду эту возможность пригодной!