Tengo una función de JavaScript que escribe, letra por letra, un mensaje. Sin embargo, donde se encuentra el carácter actual que se va a escribir, tengo una animación css parpadeante. Lo que necesito es detener esta animación y hacerla desaparecer.
Estoy usando un css con #id::after para poner la animación después del texto en cuestión. La animación funciona bien, necesito una forma de configurar el content: '█'; al content: ''; a través de JavaScript.
(function type_p(){ let msg = 'This is a message to type out! Spooky!'; let element = document.getElementById('typehere'); typeOut(msg, '', 0, element); }()); function typeOut(text, letter, index, element){ letter = text.slice(0, ++index); element.textContent = letter; if (letter.length == text.length){ stop(); } setTimeout(typeOut, 100, text, letter, index, element); } #typehere { position: relative; } #typehere::after { content: '█'; position: absolute; animation: blink 1.5s infinite; /* animation-iteration-count: 2; */ } @keyframes blink { 0% { opacity: 0; } 50% { opacity: 1; } 51% { opacity: 0; } 100% { opacity: 0; } } <p id="typehere">Here</P> Soy consciente de CSS animation-iteration-count: sin embargo, esto detendrá la animación pero seguirá siendo visible (inmóvil). ¿Cómo elimino esto?
Simplemente agregaría una clase a su elemento y cambiaría el contenido según la clase.
(function type_p(){ let msg = 'This is a message to type out! Spooky!'; let element = document.getElementById('typehere'); typeOut(msg, '', 0, element); }()); function typeOut(text, letter, index, element){ letter = text.slice(0, ++index); element.textContent = letter; if (letter.length == text.length){ element.classList.add('stop'); stop(); } setTimeout(typeOut, 100, text, letter, index, element); } #typehere { position: relative; } #typehere::after { content: '█'; position: absolute; animation: blink 1.5s infinite; /* animation-iteration-count: 2; */ } #typehere.stop::after { content: ''; } @keyframes blink { 0% { opacity: 0; } 50% { opacity: 1; } 51% { opacity: 0; } 100% { opacity: 0; } } <p id="typehere">Here</P>Esto es similar a la otra respuesta, pero me parece más fácil/limpio que agregar varias clases a algo que ya no estará visible. Puede agregar el estilo de animación como una clase y luego eliminar esa clase cuando ya no la desee. para animar
Cambiar a clase en css:
.typehereclass::after { content: '█'; position: absolute; animation: blink 1.5s infinite; }Agregue la clase a su elemento en html:
<p id="typehere" class="typehereclass">Here</P>Y luego, cuando quieras dejar de parpadear en JS:
element.classList.remove('typehereclass')