Estoy usando Typed.js en mi sitio web para recorrer un montón de citas sobre el voluntariado. Cuando lo vi funcionando, todo funciona como se supone que debe funcionar. Eso es hasta que apareció la cita con un punto y coma. Cuando lo estaba escribiendo, todo estaba bien, pero cuando lo estaba des-escribiendo, lo des-escribía normalmente hasta que llegaba al punto y coma. Cuando llegó al punto y coma, simplemente eliminó por completo toda la línea en lugar de continuar con la animación de deshacerlo.
Aquí está mi código:
var data = { strings: ["“<i>As you grow older, you will discover that you have two hands — one for helping yourself; the other for helping others.</i>” — Audrey Hepburn", "“<i>Never doubt that a small group of thoughtful, committed citizens can change the world; indeed, it's the only thing that ever has.</i>” – Margaret Mead", "“<i>The best way to find yourself is to lose yourself in the service of others.</i>” – Gandhi", "“<i>Volunteering is at the very core of being a human. No one has made it through life without someone else's help.</i>” – Heather French Henry", "“<i>Volunteerism is the voice of the people put into action. These actions shape and mold the present into a future of which we can all be proud.</i>” – Helen Dyer"], typeSpeed: 40, backSpeed: 20, shuffle: true, loop: !0 }; new Typed('.animated-text', data);Y aquí hay un pequeño video para demostrarlo:
https://im3.ezgif.com/tmp/ezgif-3-425cf91d8c.gif
Como puede ver en el gif, la cita con el punto y coma se escribe bien, pero cuando retrocede o se deshace, no se deshace hasta el punto y coma y simplemente elimina la línea. Cuando pasa a la siguiente cita, una cita que no tiene punto y coma, se escribe y se desescribe perfectamente.
Mi pregunta es por qué está sucediendo y cómo solucionarlo.
¡Gracias! ¡Cualquier respuesta es apreciada!
Puede solucionar esto codificando el punto y coma como la variante de entidad html ; .
Esto se debe a que typed.js ve un punto y coma e intenta analizar los caracteres antes de ese punto y coma como una entidad html, y dado que no hay un ampersand para indicar el inicio de dicha entidad html, elimina el resto de la cadena.
Ejemplo de ampersand y semi (incorrectamente) analizados como entidad html
tu ejemplo
var data = { strings: ["“<i>As you grow older, you will discover that you have two hands — one for helping yourself; the other for helping others.</i>” — Audrey Hepburn", "“<i>Never doubt that a small group of thoughtful, committed citizens can change the world; indeed, it's the only thing that ever has.</i>” – Margaret Mead", "“<i>The best way to find yourself is to lose yourself in the service of others.</i>” – Gandhi", "“<i>Volunteering is at the very core of being a human. No one has made it through life without someone else's help.</i>” – Heather French Henry", "“<i>Volunteerism is the voice of the people put into action. These actions shape and mold the present into a future of which we can all be proud.</i>” – Helen Dyer"], typeSpeed: 40, backSpeed: 20, loop: !0 }; new Typed('.animated-text', data);