CSS3のアニメーションとDOMを更新する

Question

これが可能なら、私はCSS3トランジションと新しく思っています。

ので、同様に、私は、それに2つのdivタグとdiv要素を持っているとしましょう：

<div id="container"> 
    <div id="apple">Apple</div> 
    <div id="orange">Orange</div> 
</div> 

私の目標は、私はリンゴとオレンジのdivの間に新しいdiv要素を追加したとき、私はそれが欲しいということです

私はCSS3トランジションを行う方法を考えるのは心配していませんが、私の質問は、コンテナdiv全体がdomで置き換えられました。

私たちの設計により、AJAXの応答はコンテナに入るための新しいdivだけでは返答しません。その代わりに、再び全体のdivコンテナを返しますが、のような中央に新しいdiv要素を含む：

<div id="container"> 
    <div id="apple">Apple</div> 
    <div id="banana">Banana</div> 
    <div id="orange">Orange</div> 
</div> 

はアニメーションの要素が交換されているときにこのような何かをアニメーション化することができ、このですか？これはもっとjQueryの仕事ですか？

Answer 1

divコンテナ全体を完全に置き換える必要がある場合は、必要な翻訳エフェクトを得る方法がないと思います。新しいものがフェードインするときに古いものがフェードアウトする何らかの種類のフェードトランジションを行うことができます。

Answer 2

キーフレーム付きのCSS3アニメーションを見てください。もちろん、WebkitとFirefoxだけです。容易になるだろう何

Answer 3

アダムは、HTMLですでにそこにdiv要素を持つことで、単にデフォルトで

display: none; opacity: 0; 

にそのCSSを設定します。あなたが望むアクションが発生すると、divの位置にCSSトランジションを使用してうまくスライドさせ、バナナdivに不透明なトランジションを適用してフェードインさせます。あなたが私に言ったらjsfiddleにすることができますボタンをクリックするとdivが表示されます