Estoy tratando de hacer que los elementos aparezcan solo después de que se haya cargado la página. Agregué una clase que elimina mis elementos y un modificador que los hace aparecer solo una vez que se carga la página.
Parece que mi transición salta cuando la página está completamente cargada, pero me gustaría que se reproduzca toda la transición. He estado buscando otras soluciones, pero nada que funcionó para mí.
Así es como se ve mi JavaScript.
class RevealOnLoad { constructor() { this.itemsToReveal = document.querySelectorAll(".hero__element"); this.hideInitially(); this.events(); } events() { let stateCheck = setInterval(() => { if (document.readyState === 'complete') { clearInterval(stateCheck); this.itemsToReveal.forEach(el => { el.classList.add("reveal-item--is-visible"); }) } console.log(document.readyState); // document ready }, 100); } hideInitially() { this.itemsToReveal.forEach(el => { el.classList.add("reveal-item"); console.log(document.readyState); }) } } export default RevealOnLoad;Y la clase css:
.reveal-item { opacity: 0; transition: opacity 1.5s ease-out, transform 1.5s ease-out; transform: scale(1.15); } .reveal-item--is-visible { opacity: 1; transform: scale(1); }Registre el document en el evento "DOMContentLoaded" , ahí es cuando se carga todo menos las imágenes:
document.addEventListener('DOMContentLoaded', reveal); El controlador de eventos es reveal(e) . Envuelva todo en reveal(e) en un setTimeout() :
function reveal(e) { setTimeout(function() { //... switch classes etc. }, 2000); } Usa @keyframe y animation en CSS.
document.addEventListener('DOMContentLoaded', reveal); function reveal(e) { setTimeout(function() { const H = document.querySelectorAll('.hidden'); H.forEach(h => { h.classList.toggle('hidden'); h.classList.toggle('revealed'); }) }, 2000); } .hidden { opacity: 0; transform: scale(0); } .revealed { animation: show 3s forwards ease-in; } @keyframes show { 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } } <h1 class='hidden'>TITLE</h1> <fieldset class='hidden'> <legend>TITLE</legend> </fieldset>