sergey_zhuravlev_89
@sergey_zhuravlev_89

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

Как плавно и без костылей показать блок после того как я его создал при помощи createElement?
Вся суть в том, что я создал блок, добавил ему стили включая вот такие: transition: opacity 1s; opacity: 0
После всего этого добавил созданный элемент на страницу и затем изменил свойство с opacity: 0 на 1, но анимации нет. Ясное дело, что браузер пытается все это дело оптимизировать и т.к. изменения стилей произошли в одном потоке, то стили изменились до того как были добавлены на страницу, но мне от этого не легче.
Можно ли как то и без костылей решить сей недуг?
Я большинство тонкостей по части CSS не знаю, может у вас есть какие соображения?
  • Вопрос задан
  • 101 просмотр
Пригласить эксперта
Ответы на вопрос 2
@kulaeff
Front-end developer
Вариант с 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().

Пример
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
Biganto Москва
от 130 000 до 130 000 руб.
Spotware Systems Лимассол
от 3 500 до 3 800 eur.
от 80 000 до 160 000 руб.
16 авг. 2018, в 12:52
100000 руб./за проект
16 авг. 2018, в 12:43
3000 руб./за проект
16 авг. 2018, в 12:11
100 руб./за проект