如何修复Wordle字母翻转动画的流畅链式序列问题？

当前代码的问题是一次性给所有元素添加动画类，导致所有字母同时触发翻转，无法实现Wordle那样的依次链式动画效果。要解决这个问题，我们可以用Promise封装单个元素的动画过程，再配合async/await实现序列执行。

修复步骤： #

1. 封装单元素动画为Promise：把单个字母的翻转流程（翻入→切换颜色→翻出）包装成Promise，当动画全部完成时触发resolve。
2. 用async/await遍历执行：在点击事件处理函数中，逐个遍历字母元素，等待前一个元素的动画完成后，再启动下一个元素的动画。

修改后的完整代码： #

// 封装单个tile的翻转动画为Promise
function animateTile(tile) {
  return new Promise((resolve) => {
    // 启动翻入动画
    tile.classList.add("flip-in");
    
    // 监听翻入动画结束
    tile.addEventListener(
      "animationend",
      () => {
        tile.classList.remove("flip-in");
        tile.style.backgroundColor = "green";
        // 启动翻出动画
        tile.classList.add("flip-out");
        
        // 监听翻出动画结束，完成后resolve
        tile.addEventListener(
          "animationend",
          () => {
            tile.classList.remove("flip-out");
            resolve();
          },
          { once: true }
        );
      },
      { once: true }
    );
  });
}

// 点击事件处理函数，改为async函数
async function myFunction() {
  var tiles = document.getElementsByClassName("inner");
  var myArray = Array.from(tiles);
  
  // 逐个执行动画，等待前一个完成再进行下一个
  for (const tile of myArray) {
    await animateTile(tile);
  }
}

var flipper = document.getElementById("flipper");
flipper.addEventListener("click", myFunction);

关键说明： #

• Promise的作用是把异步的动画结束事件转化为可等待的“完成信号”，让我们能精准控制动画的执行顺序。
• async/await语法让异步代码看起来像同步代码，避免了嵌套回调的混乱，清晰实现“做完一个再做下一个”的序列逻辑。
• 如果不需要等待翻出动画完成，而是翻入结束就启动下一个元素的翻入，可以把resolve()移到翻入动画结束的回调里，去掉翻出动画的监听即可。

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