仅使用CSS的可折叠灵活宽边栏

Question

我们假设我有一个可折叠的固定宽度边栏,如下所示:

HTML

<div class="container">
  <div class="sidebar" id="sidebar">
    SIDEBAR
  </div>
  <div class="content">
    lorem bla bla
    <button onclick="document.getElementsByClassName('sidebar')[0].classList.toggle('collapsed')">
      toggle Sidebar
    </button>
  </div>
</div>

CSS

body {
  margin:0;
}

.container {
  display: flex;
  min-height:100px;
}

.sidebar {
  position: relative;
  left: 0;
  width: 200px;
  background-color: #ccc;
  transition: all .25s;
}

.sidebar.collapsed {
  left:-200px;
  margin-right:-200px;
}

Codepen:http://codepen.io/anon/pen/pJRYJb

所以这就是问题:

我怎样才能从那里进入灵活宽度的侧边栏？

以下是约束:

• 没有javascript(我希望浏览器处理布局 - 不是我)
• 侧边栏不得与内容重叠
• 折叠时,侧边栏的右边框需要与窗口的左边框对齐(以便能够在右侧连接一个始终可见的绝对定位标签)
• 如果折叠,侧边栏的宽度不应改变,以避免在过渡期间回流
• 平滑过渡,没有任何突然跳跃
• 现代CSS(flexboxes,calc)很好

这里的主要问题是,我不能找到一种方法,说margin-right: -100%这里100%指的侧边栏的宽度

任何帮助将不胜感激!

Answer 1

改变width而不是position点击怎么样？我max-width在这种情况下使用，它的工作原理几乎与未知宽度相同。这可能会导致侧边栏上的内容回流，因此white-space:nowrap如果可以接受，请使用。

http://jsfiddle.net/dn4ge901/

body {
    margin: 0;
}
.container {
    display: flex;
}
.sidebar {
    background: #ccc;
    transition: all .1s;
    max-width: 1000px;
}
.sidebar.collapsed {
    max-width: 0;
    overflow: hidden;
}

<div class="container">
    <div class="sidebar" id="sidebar">SIDEBAR</div>
    <div class="content">lorem bla bla
        <button onclick="document.getElementsByClassName('sidebar')[0].classList.toggle('collapsed')">toggle Sidebar</button>
    </div>
</div>

另一种解决方法是同时使用transform宽度position，但动画效果会略有不同。

http://jsfiddle.net/vkhyp960/

body {
    margin: 0;
}
.container {
    display: flex;
}
.sidebar {
    background: #ccc;
    transition: all .1s;
}
.sidebar.collapsed {
    transform: translateX(-100%);
    position: absolute;
}

<div class="container">
    <div class="sidebar" id="sidebar">
        <div>SIDEBAR</div>
    </div>
    <div class="content">lorem bla bla
        <button onclick="document.getElementsByClassName('sidebar')[0].classList.toggle('collapsed')">toggle Sidebar</button>
    </div>
</div>