Quiero hacer la transición de este h1 cuando hacemos clic en el botón, el html para el h1 se agrega usando js, por lo que es dinámico, no puedo especificar la opacidad 0 y otra antes de hacer clic en el botón, ¿cuál es la forma de hacer esto? ?
const wow = document.getElementById('wow'); const test = document.querySelector('.test'); wow.addEventListener('click', () => { test.innerHTML = ` <h1 class="title"> Hello Test </h1> `; }) .title { opacity: 1; transform: translateY(0); transition: transform 1s cubic-bezier(.165,.84,.44,1) .1s,opacity 1s cubic-bezier(.165,.84,.44,1) .2s; } <div class="test"></div> <button id="wow"> Click </button>Agregue una clase al padre, luego cree CSS que revele al niño cuando el padre tiene la clase que creó ... por ejemplo, reveal en este caso
Se necesita setTimeout para que el contenido inicial se agregue al DOM pretransicionado, para que haga la transición
const wow = document.getElementById('wow'); const test = document.querySelector('.test'); wow.addEventListener('click', () => { test.innerHTML = `<h1 class="title">Hello Test</h1>`; setTimeout(() => test.classList.add('reveal'), 0); }) .title { opacity: 0; transform: translateY(100vh); transition: transform 1s cubic-bezier(.165, .84, .44, 1) .1s, opacity 1s cubic-bezier(.165, .84, .44, 1) .2s; } .reveal .title { opacity: 1; transform: translateY(0); } <div class="test"></div> <button id="wow"> Click </button> Iba a usar requestAnimationFrame en lugar de setTimeout ... pero, curiosamente, eso no funcionó (me tiene un poco perplejo) ... tenía que hacer
requestAnimationFrame(() => requestAnimationFrame() => test.classList.add('reveal')));Sé por qué eso definitivamente funciona, simplemente no entiendo por qué un solo RAF no lo hace, al menos en Firefox, probablemente funcione bien en esos otros navegadores)
tal vez setTimeout siempre se activa después de al menos un ciclo de renderizado, pero requestAnimationFrame no?
Puede poner este elemento en HTML primero, pero establezca su opacidad en 0 y luego anímelo cambiando de CLASE
titleNotShow ==> mostrar
<div class="test"> <h1 class="titleNotShow"> Hello Test </h1> </div> <button id="wow"> Click </button> const wow = document.getElementById('wow'); const test = document.querySelector('.test'); wow.addEventListener('click', () => { test.className = 'show' }) .titleNotShow { opacity: 0; transform: translateY(0); } .show{ opacity: 1; transform: translateY(0); transition: transform 1s cubic-bezier(.165,.84,.44,1) .1s,opacity 1s cubic-bezier(.165,.84,.44,1) .2s; }Después de agregar el setTimeout innerHTML transformar el h1, después de un retraso de 1 milisegundo. Puede seleccionar el elemento usando querySelector .
const wow = document.getElementById('wow'); const test = document.querySelector('.test'); wow.addEventListener('click', () => { test.innerHTML = `<h1 class="title">Hello Test</h1>`; setTimeout(() => test.querySelector(".title").style.transform = "translateY(100px)", 1) }) .title { opacity: 1; transform: translateY(0); transition: transform 1s cubic-bezier(.165, .84, .44, 1) .1s, opacity 1s cubic-bezier(.165, .84, .44, 1) .2s; } <div class="test"></div> <button id="wow"> Click </button>