0
197
Viewsjavascript onclick css se desvanece cada vez, no solo la primera vez
¿Cómo puedo hacer que el texto se desvanezca con cada clic y no solo la primera vez que uso la transición css y JavaScript?
Esto es lo que tengo hasta ahora
<style> #data { transition: .7s; } </style> <h1 id="data"></h1> <a href="#" id="clicker">click 1</a> document.getElementById('data').style.opacity = 0; function go(event){ event.preventDefault(); document.getElementById('data').style.opacity = 1; document.getElementById('data').innerHTML = 'test'; } document.getElementById('clicker').addEventListener('click', go);3 answers
Answer question0
También se puede hacer usando Element.animate() :
const dataElement = document.getElementById('data') dataElement.style.opacity = 0 function go(event) { event.preventDefault() dataElement.animate({ opacity: [0, 1] }, 700).onfinish = () => dataElement.style.opacity = 1 } document.getElementById('clicker').addEventListener('click', go) <h1 class="fade-in" id="data">test</h1> <a href="#" id="clicker">click 1</a> EDITAR: En el fragmento anterior, el controlador de eventos onfinish se usó para mantener el valor de opacidad final, ya que se volvía a establecer en 0 después de que finaliza la animación. Pero descubrí que esto también se puede lograr configurando fill: 'forwards' en las opciones de fotogramas clave:
const dataElement = document.getElementById('data') dataElement.style.opacity = 0 function go(event) { event.preventDefault() dataElement.animate({ opacity: [0, 1] }, { duration: 700, fill: 'forwards' }) } document.getElementById('clicker').addEventListener('click', go) <h1 class="fade-in" id="data">test</h1> <a href="#" id="clicker">click 1</a>También es posible que desee verificar la compatibilidad del navegador antes de implementar esos enfoques
Y si desea un enfoque más seguro, puede usar animaciones css:
const data = document.getElementById('data') data.style.opacity = 0 const clicker = document.getElementById('clicker') clicker.addEventListener('click', () => { data.classList.remove('fade-in') data.offsetWidth // required to trigger a reflow and restart the animation data.classList.add('fade-in') }) .fade-in { animation-name: fadein-animation; animation-duration: 700ms; animation-fill-mode: forwards; } @keyframes fadein-animation { 0% { opacity: 0; } 100% { opacity: 1; } } <h1 id="data">test</h1> <a href="#" id="clicker">click 1</a>0
setTimeout podría funcionar para usted. Al hacer clic, configúrelo como invisible inmediatamente y use setTimeout para tener un retraso y luego mostrarlo nuevamente.
document.getElementById('data').style.opacity = 0; document.getElementById('data').innerHTML = 'test'; function go(event){ event.preventDefault(); document.getElementById('data').style.opacity = 0; setTimeout(() => { document.getElementById('data').style.opacity = 1; }, 1000); } document.getElementById('clicker').addEventListener('click', go); #data { transition: .7s; } <h1 id="data"></h1> <a href="#" id="clicker">click 1</a>0
<h1 id="data" style="opacity:0"> </h1> <button type="button" id="clicker">Fade In</button> <script> var data = document.getElementById('data'); function fadeIn(){ data.innerHTML = 'Data entered successfully.'; data.animate({opacity:[0,1]},{duration:400,fill:'forwards'}); } document.getElementById('clicker').addEventListener('click',fadeIn); </script> 