移行中に、アニメーション化されたコンテンツが他の要素と重なり合うのを止めるにはどうしたらいいですか？

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

あなたはテキストブロックの高さを固定している場合は、高さが分からない場合は、Xpxから0pxにそれをアニメーション化することができますテキストのうち、max-height:

例max-height: 1000px aniamteからmax-height: 0;

異なるテキストブロック間にアニメーションの長さが矛盾することがありますが、目立たないものがあります。