如何在CSS动画文本之后添加静态文本

Question

我刚刚开始了几天的网络开发。

我需要帮助-我在同一行的HTML (p标记)中有两个文本，一个用"ID“链接到，另一个用"Class”链接到CSS，通过使用键帧，我一直试图在动画文本后面显示的同一行中添加一个静态文本。

我正在尝试输出--默认情况下，第一个文本是动画的，当JS操作被触发时，也就是通过单击按钮，第二个文本应该在第一个文本的同一行上显示一个静态文本。

我的代码：

JavaScript

CSS

​

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>

​