小编ken*_*orr的帖子

我有两个divs彼此相邻.单击一个按钮,左边的div向左折叠,只留下右边的div.由于右边的div是宽度:100%;它填充了折叠的左div留下的空间.唯一的问题是,当div崩溃/ CSS过渡正在进行时,正确的div消失片刻,我无法弄清楚原因.

HTML

<div>
  <div id="demo" class="collapse show width">
    <aside>
    </aside>
  </div><!--COLLAPSE-->

  <main>
    <button role="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
      simple horizontal collapsible
    </button>
    <div class="sample">
      Some TExt
    </div>
  </main>
</div>

CSS

html {
  height: 100%
}

body {
  height: 100%;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
  background: gray;
}

a {
  color: #00B7FF;
}

.collapse {
  visibility: hidden;
}

.collapse.show {
  visibility: visible;
  display: block;
}

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition-property: height, visibility;
  transition-property: height, …