Question

我正在尝试动画内容块（在显示后5秒折叠），这是有效的，但我有这个工件，崩溃转换后的display: none内容仍然影响布局，即使指定{ {1}}。

代码如下（和here is the codepen，因为我在SO代码运行器中遇到错误）：

＆＃13;

overflow: hidden

＆＃13;

setTimeout(() => {
  $('#container').addClass('closing')
}, 5 * 1000)

＆＃13;

#container {
  transition: all linear 0.5s;
  margin-bottom: 0rem;
  min-height: 4rem;
  opacity: 1;
  .step {
    transition: all linear 0.5s;
    & * {
      transition: all linear 0.5s;
    }
  }
  &.closing {
    min-height: 0rem;
    height: 0rem;
    opacity: 0;
    overflow: hidden;
    & * {
      overflow: hidden;
      min-height: 0rem;
      height: 0rem;
      padding-top: 0rem;
      padding-bottom: 0rem;
    }
  }
}
#bottom-block {
  height: 5rem;
  width: 100%;
  color: white;
  background-color: red;
}

＆＃13;

我已经在Chrome上的样式中进行了攻击，看看我是否能找出造成这种情况的原因，但即使手动删除所有<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css" rel="stylesheet"/> <div id="container" class="ui closing steps"> <div class="completed step"> <div class="content"> <div class="title">Shipping</div> <div class="description">Choose your shipping options</div> </div> </div> <div class="completed step"> <div class="content"> <div class="title">Billing</div> <div class="description">Enter billing information</div> </div> </div> <div class="active step"> <i class="info icon"></i> <div class="content"> <div class="title">Confirm Order</div> <div class="description">Verify order details</div> </div> </div> </div> <div id="bottom-block"> Testing </div>和:before伪元素，它仍然不是完全崩溃。

有关如何使其发挥作用的任何想法？

（另请注意，我没有在实际代码中使用JQuery，而是在React中通过状态管理设置类。不相关，只是想避免＆＃34;为什么不使用JQuery动画？＆＃34;回复。）

更新 Here is the forked codepen已实施以下变更。谢谢你的帮助！

Answer 1

您的.ui.steps元素显示为inline-flex：因此它是一个由line box（https://www.w3.org/TR/2007/WD-css3-box-20070809/#line-box表示的内联元素。）。

它将在其父元素中占据至少一个垂直空间的行高，在本例中为body元素。

为了说明尝试减少身体的字体大小和行高：你会看到空间缩小。当然，黑客字体大小不是一个好的解决方案，你甚至不能让它完全消失，因为大多数浏览器会忽略0的字体大小。

编辑：正如@cmprogram所说，使用display：none通常是最好的举动。此外，没有display:hidden这样的事情，我认为你对visibility:hidden

感到困惑

Answer 2

问题出在您的

中

display：inline-flex;

尝试使用：

display：block;

或

display：flex;

代替。

为什么隐藏内容会影响布局，即使隐藏在父级上的溢出？

2 个答案: