我有一个简单的布局，有一个主要部分和一个侧边栏。我需要水平展开/折叠侧边栏，侧边栏也应该推动主要部分。
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
<!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>
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;
}
该代码可以正常工作，但是当主要部分中有很多组件时，它的性能会很低，例如名单。
我们知道我们应该在动画宽度/高度上使用 CSS Transform，因为它会激发样式/布局/绘画等。
问题是，如果我用一些变换动画替换动画宽度，我真的可以提高动画的性能吗？
我试过使用scale()，但是有两个问题：
谢谢
使用FLIP技术解决。 Framer Motion 实现了名为 Layout Animation 的 FLIP。