从单词数组生成元素后为每个<span>字母</span>添加动画类：无限循环问题

要实现逐个字母动画展示数组字符串，核心是先创建好所有带hidden类的字母span，再按固定间隔逐个添加visible类，同时保证单词之间的顺序展示。下面是修改后的完整代码及逻辑说明：

修改后的CSS（添加动画过渡效果） #

html {
  box-sizing: border-box;
}

*,*::before, *::after {
  box-sizing: inherit;
}

body {
  margin: 0;
}

.wrapper {
  width: 100%;
  background-color: #333;
  color: #FFA;
  text-align: center;
  height: 100vh;
  display: flex;
  flex-direction: row;
  gap: 10rem;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  position: relative;
}

.text-wrapper {
  position: absolute;
  top: 0;
  width: 100%;
  display: flex;
  gap: 3rem;
  flex-direction: column;
  justify-content: center;
  justify-content: space-around;
}

.button {
  font-size: 3rem;
  border-radius: 6px;
  background-color: #47cefa;
}

.button:hover {
  cursor: pointer;
  background-color: #BCEF4D;
}

.words {
  opacity: 0;
}

.hidden {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.visible {
  opacity: 1;
}

修改后的JavaScript（重构异步逻辑） #

const wrapper = document.querySelector(".text-wrapper");
const buttonAnimate = document.querySelector(".animation");
buttonAnimate.addEventListener("click", startAnimation);

const sampleArray = ["Just", "another", "cool", "heading"];
// 封装延迟函数，将setTimeout转为Promise适配async/await
const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));

async function startAnimation() {
  // 防止重复点击触发多次动画
  buttonAnimate.disabled = true;
  wrapper.innerHTML = ""; // 清空历史内容

  for (let wordIndex = 0; wordIndex < sampleArray.length; wordIndex++) {
    const wordText = sampleArray[wordIndex];
    const wordDiv = document.createElement("div");
    wordDiv.classList.add("words", `word${wordIndex}`);
    
    // 批量创建当前单词的所有字母span
    const letterSpans = [];
    for (let charIndex = 0; charIndex < wordText.length; charIndex++) {
      const span = document.createElement("span");
      span.classList.add("hidden");
      span.textContent = wordText[charIndex];
      letterSpans.push(span);
      wordDiv.appendChild(span);
    }
    
    wrapper.appendChild(wordDiv);
    // 先让单词容器显示
    wordDiv.style.opacity = 1;
    
    // 逐个字母添加visible类实现动画
    for (const span of letterSpans) {
      await delay(200); // 每个字母间隔200ms
      span.classList.add("visible");
    }
    
    // 单词之间间隔1秒
    await delay(1000);
  }
  
  buttonAnimate.disabled = false; // 动画结束后恢复按钮可用状态
}

关键逻辑说明 #

1. 封装延迟函数：用delay把setTimeout转为Promise，配合async/await实现线性异步流程，避免回调嵌套和无限循环问题。
2. 分离创建与动画逻辑：先一次性创建当前单词的所有字母span，再逐个添加visible类，保证DOM操作的效率和顺序。
3. 严格控制动画顺序：每个单词的字母全部显示完成后，再等待1秒进入下一个单词；添加按钮禁用逻辑，防止重复点击导致动画混乱。
4. CSS过渡优化：给hidden类添加transition属性，让字母显示时有平滑的淡入动画，替换原无变化的opacity设置。

原HTML保持不变 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Create Element</title>
</head>
<body>
  <section class="wrapper">
    <button class="button animation">Start Animation</button>
    <div class="text-wrapper"></div>
  </section>
  <script type="module" src="./main.js"></script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Lauro235