在过渡期间，如何阻止动画内容与其他元素重叠，这些元素会立即对齐？

Question

解释

我发现这个问题有点难以言喻，但最简单的方法是查看我所说的内容，方法是查看我制作的CodePen。

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

正如您所看到的，动画的文字内容会短暂地重叠在下面的div，该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; } } 会立即移动到新位置。有什么办法可以避免这种情况吗？

CSS

<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>

HTML

const tree = {
    exercises: { 1: { name: ... }, ... },
    workouts: { 1: ... },
    programs: { 1: ... },
}

Answer 1

如果您的文本块高度固定，则可以将其设置为Xpx到0px，如果您不知道文本的高度，可以使用{{1}进行操作}

示例max-height: aniamte到max-height: 1000px;

不同文本块之间的动画持续时间可能不一致，但您可以找到中间的内容，这些内容很难被注意到。