css 提高宽度动画性能

rryofs0p 于 2023-03-09 发布在其他

关注(0)|答案(1)|浏览(106)

我有一个简单的布局与一个主要部分和一个侧边栏。我需要展开/折叠侧边栏水平，侧边栏也应该推动主要部分。

body {
  height: 100vh;
  margin: 0;
  display: flex;
}

main {
  flex: 1;
  background-color: coral;
}

ul {
  margin: 0;
  padding: 10px;
  list-style-type: none;
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}

aside {
  width: 24px;
  background-color: red;
  transition: width 200ms ease;
}

aside.open {
  width: 240px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <main>
      <ul>
        <li>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
          pharetra, orci ut faucibus faucibus, risus augue mattis eros, et
          maximus mauris libero quis elit. Curabitur porta ac ante accumsan
          imperdiet.
        </li>
        <li>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
          pharetra, orci ut faucibus faucibus, risus augue mattis eros, et
          maximus mauris libero quis elit. Curabitur porta ac ante accumsan
          imperdiet.
        </li>
        <li>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
          pharetra, orci ut faucibus faucibus, risus augue mattis eros, et
          maximus mauris libero quis elit. Curabitur porta ac ante accumsan
          imperdiet.
        </li>
      </ul>
    </main>
    <aside></aside>
    <script>
      const aside = document.querySelector("aside");
      document.addEventListener("keydown", (event) => {
        if (event.key === "ArrowLeft") {
          aside.classList.add("open");
        }
        if (event.key === "ArrowRight") {
          aside.classList.remove("open");
        }
      });
    </script>
  </body>
</html>

https://codesandbox.io/s/bitter-wind-elo67e?file=/style.css
一个二个一个一个
这段代码可以正常工作，但是当主部分中有很多组件时，例如List，它的性能会很低。
正如我们所知，我们应该使用CSS转换超过动画宽度/高度，因为它引发的风格/布局/油漆等。
问题是，如果我用一些变换动画来代替宽度动画，我真的能提高动画的性能吗？
我试过使用scale（），但有两个问题：
1.优选使用Px
1.侧边栏不会推动主部分
谢谢

css

来源：https://stackoverflow.com/questions/74809677/improving-animating-width-performance