CSS侧边栏与flexbox和静态宽度

Question

我正在尝试实现一个具有静态宽度和flexbox的侧边栏。我有两个问题：

1. 当侧边栏关闭时，仍然有空间，我不明白它是从哪里来的
2. main侧未设置动画。它是在没有动画的情况下推送的

这是我的代码：

const aside = document.querySelector('aside');
document.querySelector('button').addEventListener('click', () => {
aside.classList.toggle('open');
})

* {
box-sizing: border-box;
}
section {
display: flex;
height: 100vh;
}
main {
overflow-y: auto;
flex: 1;
background: red;
}
aside {
background: hotpink;
padding: 10px;
flex: 0;
transition: transform 0.3s cubic-bezier(0, 0, 0.3, 1);
transform: translateX(-100%);
}
aside.open {
flex: 0 0 250px;
transform: translateX(0%);
}

<section>
<aside>
Sidebar content
</aside>
<main>
<button>Toggle</button>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio illum sed neque molestias nihil deserunt facilis voluptatibus recusandae vero necessitatibus quas id consectetur similique, architecto voluptates officia obcaecati, corporis dolor?
</p>
</main>
</section>

Answer 1

您可以尝试设置边距的动画。

const aside = document.querySelector('aside');
document.querySelector('button').addEventListener('click', () => {
aside.classList.toggle('open');
})

* {
box-sizing: border-box;
}
section {
display: flex;
height: 100vh;
overflow:hidden;
}
main {
overflow-y: auto;
flex: 1;
background: red;
transition: transform 0.3s cubic-bezier(0, 0, 0.3, 1);
}
aside {
background: hotpink;
width:250px;
padding: 10px;
margin-left:-250px;
transition: margin 0.3s cubic-bezier(0, 0, 0.3, 1);
}
aside.open {
margin-left:0px;
}

<section>
<aside>
Sidebar content
</aside>
<main>
<button>Toggle</button>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio illum sed neque molestias nihil deserunt facilis voluptatibus recusandae vero necessitatibus quas id consectetur similique, architecto voluptates officia obcaecati, corporis dolor?
</p>
</main>
</section>

Answer 2

看看这是否有效。删除这些类中的当前样式并尝试以下操作：

aside {
background: hotpink;
width: 0px;
transition: width 0.3s ease;
}
aside.open {
width: 200px;
padding: 10px;
}

如果你真的想使用flex本身：你可以这样做

aside {
background: hotpink;
padding: 10px;
flex: 0;
transition: transform 0.3s cubic-bezier(0, 0, 0.3, 1);
transform: translateX(-100%);
}
aside.open {
flex: 0 0 250px;
transform: translateX(0%);
}

同时，请给你的身体加上边距：0以去除边距。

Answer 3

将transform:translateX(-17%(添加到主

main {
overflow-y: auto;
flex: 1;
background: red;
transform: translateX(-17%);
}