html - 在过渡期间，我如何阻止动画内容与其他立即卡入到位的元素重叠？

Question

解释

我发现这个问题有点难以表达，但了解我在说什么的最简单方法是查看我制作的 CodePen。

https://codepen.io/anon/pen/gxqXzL

如您所见，动画的文本内容与下面的 div 短暂重叠，后者立即移动到新位置。有什么办法可以避免这种情况吗？

CSS

p{
  width:400px;
}

hr{
  width:400px;
  margin-left:0px;
}

.section{
  width:400px;

  transition: transform 0.3s cubic-bezier(0, 1, 0.5, 1);
  transform: scaleY(1);
  transform-origin: top;

  &.closed{
    transform: scaleY(0);
    height: 0;
  }
}

HTML

<button onclick="toggle()">Toggle</button>
<hr/>
<p>Text</p>
<hr/>
<div id="section" class="section">
  <p>Lorem ipsum....</p>
</div>
<hr/>
<p>Text</p>
<hr/>
<div class="section">
  <p>Lorem ipsum...</p>
</div>

Answer 1

如果你有固定的文本 block 高度，你可以将它从 Xpx 设置为 0px，如果你不知道文本的高度，你可以做一个max-height:

技巧

示例 max-height: 1000px 动画到 max-height: 0;

不同文本 block 之间的动画持续时间可能不一致，但您可以找到中间的东西，这几乎不会引起注意。