html - 带有 flexbox 和静态宽度的 CSS 侧边栏

Question

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

当侧边栏关闭时，还有空间，我不明白它是从哪里来的。

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>