Как сделать плавное появление блока через innerHTML?

Question

[tmtimuchin]

С помощью innerHTML вставляю на странице блок. Всё работает, но хотелось бы добавить анимацию при появлении блока. То есть не обычное возникновение его из ниоткуда, а как-будто он плавно выплывает сверху.

Вот фрагмент кода с функцией:

document.querySelector("#res").innerHTML = "<hr><div class='p-4 bg-light'><p>Проект будет стоить</p><p><b>" + finalCalc + " рублей</b></p></div>";

<div id="res">

Answer 1

[Константин]

Если через джаваскрипт, то установи таймер setTimeout на нужную задержку, а в функции колбэк добавь присвоения стиля с анимацией opacity/transition

Answer 2

[Игорь]

Вот фрагмент кода с функцией:
document.querySelector("#res").innerHTML = "Проект будет стоить" + finalCalc + " рублей";

Если бы я работал с вами в команде, я бы вас побил за такой код (это шутка).
Но я бы на вашем месте, обернул добавляемый код в div, установил родительскому компоненту position: relative; overflow: hidden;, а блоку который использовал для обертки задал position: absolute; transition: top 4s; и поднял бы выше области видимости в родительском элементе. Потом установил для блока обертки top: 0;, а дальше CSS все сделает сам.

UDP: Вот, что бы наглядно посмотрели что имею ввиду: