Css3で遅延を取り除く方法最大高さの遷移を使用するスライドアウトの遷移

Question

私はパネルをスライドさせるために使用しているトランジションに問題があります。

次jsbinで私はトグルボタンに遷移がすぐに発生した最初の時間をクリックすることhttp://jsbin.com/uvejuj/1/

お知らせを見てみてください。

ボタンをもう一度クリックすると、トランジションが実行される前にトランジションの時間が遅れます。

締め切りの原因となっていることは何ですか、どうすれば取り除くことができますか？

おかげ

Answer 1

あなたは0と1000px最大高さの間でアニメーション化しているので、それはですが、あなたのコンテンツは約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; 
}