Transiciones solo después de cargar la página | Programar Plus

Si alguna vez ha utilizado transiciones CSS en elementos estructurales de su página, es posible que haya notado un caso en el que ve que la transición ocurre cuando la página se carga y se está diseñando.

Video rápido del problema que estaba teniendo:

Para solucionarlo, acabo de agregar una clase de “precarga” al elemento del cuerpo.

<body class="preload">

Luego, asegúrese de que no ocurran transiciones:

.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}

Luego eliminó esa clase en la carga de la página:

$(window).load(function() {
  $("body").removeClass("preload");
});

Funcionó bastante bien. Sería bueno poder prevenir o activar animaciones / transiciones en la carga de la página sin JavaScript, pero lamentablemente.