css - 使用过渡移动时，如何使两个 float div 平滑地相互跟随？

Question

我需要一些 CSS 编码方面的帮助。我目前正在尝试做的是一个滑入的侧边栏(就像在移动页面上一样)，但我没有使位置成为绝对位置，而是让两个 div float 在包装器中。

我的解释能力不是很好，所以我会通过给你一个非常简单的例子来演示。

HTML:

<!-- Using to toggle the sidebar -->
<input type="checkbox" id="toggle" hidden="hidden">

<!-- The wrapper -->
<div class="wrapper">

  <!-- The content -->
  <div class="content">
    <label for="toggle">Show</label>
    <!-- Content goes here -->
  </div>

  <!-- The sidebar -->
  <aside class="sidebar">
    <label for="toggle">Hide</label>
    <!-- Sidebar content goes here -->
  </aside>

</div>

CSS:

/* Just some general settings */
* { margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
}

/* When toggle - do this */
#toggle:checked + .wrapper > .content {
  margin-left: -25%;
  transition: all ease 1s;
}

/* The wrapper */
.wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: all ease 1s;
}

/* The content */
.wrapper > .content {
  width: 100%;
  height: 100%;
 overflow: auto;
  float: left;
  background-color: #2ecc71;
  transition: all ease 1s;
}

/* The sidebar */
.wrapper > .sidebar {
  width: 25%;
  height: 100%;
  overflow: auto;
  float: left;
  background-color: #27ae60;
  transition: all ease 1s;
}

如您所见，当您单击“显示”或“隐藏”时，边栏不会顺利出现或消失。 有什么办法可以让它顺利吗？

Answer 1

最简单的方法是在 body 标签上切换一个类。例如 .sidebar-open:

.wrapper,
.sidebar {
  transform: translateX(0);
  transition: all .5s ease-in-out;
}    

.sidebar-open .wrapper,
.sidebar-open .sidebar {
  transform: translateX(-200px);
}