div 在 CSS 过渡期间消失答案

【问题标题】：Div disappears during CSS transitiondiv 在 CSS 过渡期间消失
【发布时间】：2017-12-31 02:11:06
【问题描述】：

我有两个并排的 div。单击按钮，左侧的 div 向左折叠，只留下右侧的 div。由于右侧的 div 是 width: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, visibility;
  -webkit-transition-duration: 0.45s;
  transition-duration: 0.45s;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
}

.collapsing.width {
  -webkit-transition-property: width, visibility;
  transition-property: width, visibility;
  width: 0;
  height: auto;
}

aside {
  height: 100vh;
  width: 250px;
  background-color: white;
  /*border-right:1px solid black;*/
  display: block;
  float: left;
}

.sample {
  margin-top: 100px;
  text-align: center;
}

main {
  width: 100%;
  height: 100vh;
  background-color: pink;
  display: inline;
}

活生生的例子

https://jsfiddle.net/djjvqtop/1/

这发生在所有浏览器中。有没有办法防止这种情况？

【问题讨论】：

问题是虽然元素的高度为100vh，但它实际上并没有占据它，因为它被设置为display: inline。当您滚动时，它不会“消失”，而是会自行移动下方以适应高度。如何真正修复...遗憾的是我不确定。隐藏溢出不起作用，更改显示不起作用等。相当有趣的一个；赞成！

标签： html css bootstrap-4

【解决方案1】：

问题是由于添加overflow: hidden 会改变#demo 的高度引起的。最初它是 0，因为它只包含浮点元素。 .collapsing 类添加了 overflow: hidden，这使其扩展为包含浮点数。所以#demo.collapsing 的高度是<aside>，而<main> 元素在它的下方并且看不见。

一种解决方案是让#demo 也向左浮动。

【讨论】：