<div id="container"> <button id="button">Click!</button> </div>JS:
const container = document.querySelector("#container"); const button = document.querySelector("#button"); button.addEventListener("click", () => { let para = document.createElement("p"); para.textContent = "Text message one. Text message two. Text message three."; let strText = para.textContent; let splitText = strText.split("."); for (let i=0; i<splitText.length;i++) { splitText.textContent += "<span>" + splitText[i] + "</span>"; } container.appendChild(splitText[i]); });¡ESTOY ATASCADO! ¿Cómo puedo escribir mi código de tal manera que al hacer clic en el botón, los componentes de la matriz del párrafo se muestren (animados) en el div uno tras otro? Sé sobre la animación y la transición CSS, pero no sé cómo aplicarlo aquí.
¿Te refieres a algo como esto?
const container = document.querySelector("#container"); const button = document.querySelector("#button"); let idx = 0; let sentnce = "Text message one. Text message two. Text message three."; let texts = sentnce.split(".").slice(0, -1); button.addEventListener("click", () => { if (idx < texts.length) { let p = document.createElement("p"); p.textContent = texts[idx]; container.appendChild(p); ++idx; } }); <div id="container"> <button id="button">Click!</button> </div>