使用 async/await 处理动画效果

在 Web 开发中，通常需要在 DOM 元素上应用动画效果。使用传统的 JavaScript 回调函数和 setTimeout() 方法来实现这些效果可能会导致出现回调地狱的问题。

通过使用 async/await，我们可以更轻松地在 DOM 上应用动画效果。例如，下面是一个简单的例子，展示如何使用 async/await 实现淡入动画效果：

async function fadeIn(element, duration) {
  element.style.opacity = 0;
  element.style.display = 'block';
  const start = performance.now();
  while (performance.now() - start < duration) {
    const percentage = (performance.now() - start) / duration;
    element.style.opacity = Math.min(percentage, 1);
    await new Promise(resolve => requestAnimationFrame(resolve));
  }
  element.style.opacity = 1;
}

在上述代码中，我们定义了一个名为 fadeIn 的异步函数，并将其声明为 async。该函数接受两个参数：一个 DOM 元素和一个表示动画持续时间的数字（以毫秒为单位）。

在函数的主体中，我们首先设置元素的初始状态：将其不透明度设置为 0，并将其显示出来（通过将其 display 样式设置为 "block"）。

接着，我们使用 performance.now() 函数获取当前时间，并在每个帧之间进行循环。在循环内部，我们计算从动画开始到当前帧的时间百分比，并使用该百分比来计算元素应该具有的不透明度值。然后，我们使用 requestAnimationFrame() 函数等待下一帧，并将其封装在一个 Promise 中，以便在下一帧完成时恢复函数的执行。

最后，我们将元素的不透明度设置为 1，以确保最终状态正确。