3

高さが最大 ​​( JQuery のプログレッシブ show のように) まで成長しているかのようにブロック要素を表示し、その後の要素をスムーズに「プッシュ」して成長させたいと考えています。

固定height( max-height0 から必要なサイズにする) では簡単ですが、0 から変更height: autoすることはできません(要素の高さはずっと 0px で、突然アニメーションの 100% で表示されます)。max-heightnone

transformからまでの範囲を試しましscaley(0)たscaley(1)が、高さはトランジションの最初から自動的に「予約」されます (したがって、挿入された要素の後のコンテンツは、滑らかで漸進的なプッシュではなく、残酷に下にシフトされます)。

4

5 に答える 5

6

コンテンツの前に「プッシャー」要素 (または疑似要素) を使用できます。

<div class="container open">
    <div class="pusher"></div>
    ... the rest of the unknown height content
</div>

次に、プッシャーのマージンを移行します。

.container { overflow:hidden }
.pusher { margin-top:-100%; transition:margin-top .5s ease; }
.open .pusher { margin-top:0%; }
于 2012-09-26T23:13:43.460 に答える
1

解決策は、移動するはずのすべての要素を個別に変換することです (つまり、要素の後のコンテンツに別の変換を追加します)。通常、変換による自動リフローは当てになりません。

于 2011-02-03T23:30:04.253 に答える
0

別の手法がResponsive Navで使用され、JavaScript を使用してターゲットの高さを計算し、max-height0 から結果の値への遷移を作成します。

コードはこちら。

于 2013-04-09T11:59:39.303 に答える
0

Michael の言うとおりです。'auto' 値を適用すると、きれいにアニメーション化されません。定義された高さを設定する必要があります。ここで Duopixel の jsfiddle にいくつかの変更を加えました: http://jsfiddle.net/joshvogt/vjXuH/

各要素の高さを完璧にしたい場合は、各要素にクラスを適用し、それぞれの高さを指定する必要があります。リンクは、最大の要素の高さを設定します。

于 2011-02-06T14:36:37.030 に答える
0

エミュレートする最善の解決策は、代わりheight: auto;にアニメーション化することだと思われます。max-heightDuMaurier のフィドルを更新しましたが、動作しているようです: http://jsfiddle.net/8JLKA/1/

私はデフォルトに設定することから始めて、それをボックスが必要とするよりもはるかに大きなものにmax-height移行しました. CSSトランジションをいじるのはこれが初めてなので、重要なものが欠けている可能性があります.:hover500px

更新:わかりました、私はこれを残しますが、それはほとんど悪い考えです. 問題は、遷移時間がmax-heightand の完全な値にリンクされていることです。そのため、コンテンツの実際の高さがアニメーションの値に非常に近い場合を除き、max-heightアニメーションの発生が速すぎるように見えます。奇妙なことに、高値から離れるとmax-height、遷移に予想どおりの時間がかかります。これがなぜなのかわかりません。また、イージングも正しく表示されません。

于 2012-01-17T17:57:20.330 に答える