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)
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter