Estoy usando fotogramas clave, pero mi h1 no está visible al hacer clic en el botón. ¿Qué estoy haciendo mal?
Aquí está mi código:
function abc() { document.querySelector('.h1cls').classList.add('fadeIn') } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { animation-name: fadeIn; animation-duration: 150ms; animation-timing-function: linear; animation-delay: 5000ms; /*opacity:1;*/ } .one .two .h1cls { opacity: 0; } <div class="one"> <div class="two"> <h1 class="h1cls">hello</h1> <div></div> </div> </div> <button onclick="abc()">asd</button>https://codesandbox.io/s/serene-lamport-12kgz?file=/index.html:0-994
en realidad estoy usando opacidad. Estoy configurando la opacidad en 1 después de hacer clic en el botón.
En su función abc() , también debe eliminar la clase h1cls debido al hecho de que aún aplica el estilo opacity: 0 .
function abc(){ document.querySelector('.h1cls').classList.add('fadeIn') document.querySelector('.h1cls').classList.remove('h1cls') }Se está animando pero luego desaparece inmediatamente. Debe indicarle al sistema que mantenga el estado final de la animación. Haces esto con el modo de relleno de animación: adelante
Tenga en cuenta que la animación solo se ejecutará con el primer clic del botón.
Tienes que agregar animation-fill-mode:forwards; propiedad también en fadeClass para que esto funcione
function abc() { document.querySelector('.h1cls').classList.add('fadeIn') } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { animation-name: fadeIn; animation-duration: 150ms; animation-timing-function: linear; /*animation-delay: 5000ms;*/ animation-fill-mode:forwards; // add this line /*opacity:1;*/ } .one .two .h1cls { opacity: 0; } <div class="one"> <div class="two"> <h1 class="h1cls">hello</h1> <div></div> <button onclick="abc()">asd</button>