アニメーションページのリフロー？

Question

divの内容を変更しています（古い内容が消えてから新しい内容が消えてしまいます）。内容が少し違っているので、変更した瞬間に、下のすべての内容がぎっしりと再構成されます。

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

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

明示的なディメンションを指定せずにこれを取得する方法はありますか？私は経験豊富なアイテムをアニメーションでページの周りを動かすことをいつも思い出しているようです。これは私に、ちょうどCSSを使ってできることを願っています。

Answer 1

私は通常、高さを計算するために新しいコンテンツを保持する一時的（目に見えない）要素を作成します。その後、元の要素は、現在の高さから新しく計算された高さにアニメートすることができます。

必要なすべてのスタイルのカスケードと正しく継承されますが（例えば、新しいコンテンツの高さを計算することは無用であること、それが正しいれていない場合ので、作成した一時的な要素は元の要素の同じ兄弟であることが重要です明示的に設定され、異なる高さの間でアニメーション間font-sizeは

）適用（すなわち、CSS3（transition: height .5s ease;）を用いて達成することができる）前述のように、それは暗黙的に設定異なる高さ（すなわちheight:auto持つ要素のコンテンツを変更する）

ために動作しませんJSと