5

div の内容を切り替えています (古い内容をフェードアウトしてから、新しい内容をフェードインします)。内容がわずかに異なるため、内容が変更された瞬間に、その下のすべてが不快な再編成になります。

私の質問は、この動きをスムーズにする方法はありますか?

これを行う唯一の実行可能な方法は、javascriptを使用して、開始要素と終了要素の高さ(私の場合、垂直方向の配置がシフトするブロックのみを処理する)を事前に決定し、これらを割り当てることだと思います。値を直接指定します。これを行うと、CSS3 トランジションで快適なアニメーションが適用されると確信しています。

明示的な寸法を指定せずにこれを取得する方法はありますか? ある時点で、アイテムがアニメーションのようにページ内を移動したことを思い出したようです。これは、CSSだけで実現できることを願っています。

4

1 に答える 1

2

通常、新しいコンテンツを保持する一時的な (目に見えない) 要素を作成して、その高さを計算します。その後、元の要素を現在の高さから新しく計算された高さにアニメーション化できます。

必要なすべてのスタイルがカスケードされ、正しく継承されるように、作成された一時要素が元の要素と同一の兄弟であることが重要です(たとえば、新しいコンテンツの高さの計算は、正しくfont-size適用されていない場合は役に立ちません) 。

明示的に設定された (つまり、上記のように JS を使用して) 異なる高さの間でアニメーション化することは CSS3 ( ) で実現できますが、暗黙的に設定された (つまり、要素のコンテンツを で変更する)transition: height .5s ease;異なる高さでは機能しません。height:auto

于 2012-07-15T01:27:47.853 に答える