如何刪除Css3上的延遲滑出使用最大高度轉換的轉換

Question

我遇到了用於將面板放入和退出的轉換的問題。

請看看下面的jsbin http://jsbin.com/uvejuj/1/

注意，當我點擊切換按鈕，在第一時間的過渡立即發生。

但是，如果我再次單擊該按鈕關閉，則轉換會在轉換執行之前延遲轉換的時間量。

什麼是導致延遲關閉，我該如何擺脫它？

感謝

Answer 1

這是因爲你的動畫最大1000像素介於0和高度，但內容只有大約120像素高。延遲是在您無法看到的880像素上發生的動畫。

將max-height設置爲您的內容的已知高度（如果您知道它 - 例如：http://jsbin.com/onihik/1/）或嘗試其他方法。可能像https://stackoverflow.com/a/6486082/2619379

Answer 2

Fixed JS Bin

修復延遲溶液：

將立方貝塞爾（0，1，0，1）過渡爲元件的功能。

.text { 
    overflow: hidden; 
    max-height: 0; 
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); 
    &.full { 
    max-height: 1000px; 
    transition: max-height 1s ease-in-out; 
}