如何在 CSS 中的動畫文本之后添加 static 文本

Question

我剛剛開始幾天 web 開發。
我需要幫助 -我在同一行的 HTML（p 標簽）中有兩個文本，一個用“ID”鏈接到 JS，另一個用“類”鏈接到 CSS，並使用關鍵幀，我一直在嘗試在動畫文本之后顯示的同一行上添加 static 文本。

我正在嘗試 output - 默認情況下第一個文本動畫，當觸發 JS 動作時，即通過單擊按鈕，第二個文本應在與第一個文本相同的行上顯示 static 文本。

我的代碼：

JavaScript
CSS
HTML

 let secondText = document.getElementById("second-text"); let a = 1; let b = 5; let c = a + b; let result = ""; function startAction() { if (c <= 12) { result = "December"; } else { result = "Not-Exists"; } secondText.textContent = result; console.log(result); }

 #second-text { margin: 30px; font-size: 20px; font-weight: 700; }.first-text { margin: 30px; font-size: 20px; font-weight: 700; animation: typing 10s steps(19) infinite; overflow: hidden; white-space: nowrap; border-right: 2px solid #111; width: 19ch; } @keyframes typing { 0% { width: 0ch; } 50% { width: 19ch; } 100% { width: 0ch; } }

 <p class="first-text" id="second-text">Welcome To My Page</p> <button onclick="startAction()">Action</button>

請幫我弄清楚我的代碼出了什么問題？

Answer 1

那是你要找的嗎？

 let secondText = document.getElementById("second-text"); let a = 1; let b = 5; let c = a + b; let result = ""; function startAction() { document.getElementById("second-text").classList.remove("first-text"); document.getElementById("second-text").classList.add("newClass"); if (c <= 12) { result = "December"; } else { result = "Not-Exists"; } secondText.textContent = result; console.log(result); }

 .first-text { margin: 30px; font-size: 20px; font-weight: 700; animation: typing 10s steps(19) infinite; overflow: hidden; white-space: nowrap; border-right: 2px solid #111; width: 19ch; }.newClass{ margin: 30px; font-size: 20px; font-weight: 700; overflow: hidden; white-space: nowrap; width: 19ch; } @keyframes typing { 0% { width: 0ch; } 50% { width: 19ch; } 100% { width: 0ch; } }

 <p class="first-text" id="second-text">Welcome To My Page</p> <button onclick="startAction()">Action</button>