在轉換過程中，如何阻止動畫內容重疊其他可立即捕捉到的元素？

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;

不同文本塊之間的動畫持續時間可能不一致，但您可以找到中間的東西，這幾乎不可見。