Question

我试图将侧边栏滑出并拉出内容，但我的代码只执行前者。我也尝试过动画内容，但它保持宽度并且不会扩展。

相当灵活的新手。

HTML：

<div class="wrapper">
  <div class="sidebar open">

  </div>
  <div class="content">
    <a id="toggle" href="#">Toggle</a>
  </div>
</div>

CSS：

body,
html {
  height: 100%;
}

.wrapper {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 100%;
  width: 900px;
  background: blue;
  margin: auto;
  overflow: hidden;
}

.sidebar {
  background: green;
  width: 300px;
  -webkit-transition-duration: .3s;
  transition-duration: .3s;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  -webkit-border-top-left-radius: 4px;
  -webkit-border-bottom-left-radius: 4px;
  -moz-border-radius-topleft: 4px;
  -moz-border-radius-bottomleft: 4px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.sidebar.open {
  position: static;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.sidebar.closed {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  //display: none;
}

.content {
  background: red;
  min-width: 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

JS：

$('#toggle').on('click', function(e) {
  e.preventDefault();
  $('.sidebar').toggleClass('open closed');
});

Answer 1

由于transform不会移动任何其他内容，因此不会推送content元素。

一种选择是使用margin-left来做到这一点。

Updated codepen

Stack snippet

$('#toggle').on('click', function(e) {
  e.preventDefault();
  $('.sidebar').toggleClass('open');
});

body,
html {
  height: 100%;
}

.wrapper {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  height: 100%;
  width: 900px;
  background: blue;
  margin: auto;
  overflow: hidden;
}

.sidebar {
  position: relative;
  background: green;
  width: 300px;
  -webkit-transition-duration: .3s;
  transition-duration: .3s;
  margin-left: -300px;
  -webkit-border-top-left-radius: 4px;
  -webkit-border-bottom-left-radius: 4px;
  -moz-border-radius-topleft: 4px;
  -moz-border-radius-bottomleft: 4px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.sidebar.open {
  margin-left: 0;
}

.content {
  background: red;
  min-width: 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="sidebar">

  </div>
  <div class="content">
    <a id="toggle" href="#">Toggle</a>
  </div>
</div>

Css flex侧边栏幻灯片

1 个答案: