Por defecto, cuando creamos un elemento HTML y tiene asignada una transición, la transición CSS no se ejecuta; para que se ejecute, podemos agregar un pequeño retraso; por ejemplo, tomando este fragmento de código de nuestro curso y libro sobre transiciones y animaciones creativas en CSS, tenemos un contenedor:

.box {
    background: #5544AA;
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 600px;
    height: 300px;
    margin-top: 10px;
    border-radius: 5px;
    transform: translateX(600%);
    transition: transform 0.4s;
}
.box.show{
    transform: translateX(0);
}

Y para que podamos agregar la transicion en CSS una vez creado el HTML:

document.querySelector('.container').innerHTML += '<div class="box show"><h1>Content</h1></div>'

Agregamos un pequeno retardo; en este ejemplo, la última caja es la que se agrega con el script anterior:

 setTimeout(function () {
        document.querySelectorAll('.container .box')[document.querySelectorAll('.container .box').length - 1].classList.add("show");
    }, 0)