在繁重的javascript函数中，如果我使用translateX（100%），css动画将停止 台阶 继续回复： 点击切换边栏按钮 动画是平滑的，平滑的 取消注释第28行 评论第29行 再次点击按钮 在toggleSidebar函数中调用heavy函数时，动画停止 问题

我不明白为什么会这样

如果我将-200px更改为-100%，会发生什么导致动画停止

我怎样才能解决这个问题？如果我事先不知道边栏的宽度怎么办？如果它是动态的呢

密码 .侧边栏{ 动画：侧边栏向右滑动3秒钟； } @关键帧侧边栏向右滑动{ 0% { /*转化：translateX-100%*/ 转换：translateX-200px； } 100% { transform:translateX0； } }

---

我花了一些时间在web浏览器开发工具中测试repl的性能。我的结论是：

在现代网络浏览器中，我们有

主线 排字线 第二个是非常好的，因为它通过自己承担一些责任来帮助主线

通常，主线程负责：

运行JavaScript

计算HTML元素的CSS样式

布置你的页面。将元素绘制到一个或多个位图中

将这些位图交给合成器线程

通常，合成器线程负责：

通过GPU在屏幕上绘制位图

要求主线程更新页面可见部分或即将可见部分的位图

确定页面的哪些部分是可见的。弄清楚是哪个 当您滚动时，部件很快就会可见

滚动时移动页面的各个部分

资料来源：

基于CSS的动画和本机支持的Web动画 通常在称为合成器线程的线程上处理。这 与浏览器的主线程不同，在主线程中， 绘制，并执行JavaScript。这意味着如果浏览器 正在主线程上运行一些昂贵的任务，这些动画 可以不被打断地继续进行

在许多情况下，对变换和不透明度的其他更改也可能被忽略 由合成器线程处理

如果任何动画触发绘制、布局或两者，则主线程 将被要求做工作。这对于CSS和CSS都是正确的 基于JavaScript的动画，布局或绘制的开销将 可能会使任何与CSS或JavaScript执行相关的工作相形见绌， 使问题变得毫无意义

资料来源：

所以当我们必须处理动画时，合成器是非常好的。使用px作为度量单位很容易，而且可以由合成器线程完成，但是使用%会让浏览器计算动画的每一步，因此主线程必须帮助我们完成。通过使用wait，您可以阻止主线程，以便浏览器等待获得重新计算的位置。使用绝对单位时，合成器线程将执行动画，因此即使您阻止主线程，动画也会平稳运行

将代码替换为

  async function toggleSidebar() {
    sidebarVisible = !sidebarVisible;
    console.log("1");
    await sleep(800);
    console.log("2");
    heavy(40);
  }

您可以注意到使用%的原因：

动画运行

控制台日志1 动画停止 console.log 2 动画运行 使用px：

控制台日志1 动画仍在运行 console.log 2 动画结束

---

我花了一些时间在web浏览器开发工具中测试repl的性能。我的结论是：

在现代网络浏览器中，我们有

主线 排字线 第二个是非常好的，因为它通过自己承担一些责任来帮助主线

通常，主线程负责：

运行JavaScript

计算HTML元素的CSS样式

布置你的页面。将元素绘制到一个或多个位图中

将这些位图交给合成器线程

通常，合成器线程负责：

通过GPU在屏幕上绘制位图

要求主线程更新页面可见部分或即将可见部分的位图

确定页面的哪些部分是可见的。弄清楚是哪个 当您滚动时，部件很快就会可见

滚动时移动页面的各个部分

资料来源：

基于CSS的动画和本机支持的Web动画 通常在称为合成器线程的线程上处理。这 与浏览器的主线程不同，在主线程中， 绘制，并执行JavaScript。这意味着如果浏览器 正在主线程上运行一些昂贵的任务，这些动画 可以不被打断地继续进行

在许多情况下，对变换和不透明度的其他更改也可能被忽略 由合成器线程处理

如果任何动画触发绘制、布局或两者，则主线程 将被要求做工作。这对于CSS和CSS都是正确的 基于JavaScript的动画，布局或绘制的开销将 很可能是矮人 与CSS或JavaScript执行相关的工作， 使问题变得毫无意义

资料来源：

所以当我们必须处理动画时，合成器是非常好的。使用px作为度量单位很容易，而且可以由合成器线程完成，但是使用%会让浏览器计算动画的每一步，因此主线程必须帮助我们完成。通过使用wait，您可以阻止主线程，以便浏览器等待获得重新计算的位置。使用绝对单位时，合成器线程将执行动画，因此即使您阻止主线程，动画也会平稳运行

将代码替换为

  async function toggleSidebar() {
    sidebarVisible = !sidebarVisible;
    console.log("1");
    await sleep(800);
    console.log("2");
    heavy(40);
  }

您可以注意到使用%的原因：

动画运行

控制台日志1 动画停止 console.log 2 动画运行 使用px：

控制台日志1 动画仍在运行 console.log 2 动画结束

---

很好的解释。谢谢你的回答。我怎样才能解决这个问题？如果我不知道边栏的宽度怎么办？如果是动态的呢？很好的解释。谢谢你的回答。我怎样才能解决这个问题？如果我不知道边栏的宽度怎么办？如果是动态的呢？