jquery - CSS3アニメーションとDOMの更新

Question

私はCSS3トランジションに不慣れで、これが可能かどうか疑問に思っています。

次のように、2つの子divを含むdivがあるとします。

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

私の目標は、リンゴとオレンジのdivの間に新しいdivを追加するときに、2つの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タスクのようなものですか？

score 0 · Accepted Answer

どうしてもdivコンテナ全体を置き換える必要がある場合、希望する翻訳効果を得る方法はないと思います。新しいものがフェードインするにつれて古いものがフェードアウトする、ある種のフェードトランジションを行うことができます。

score 0 · Accepted Answer

キーフレームを使用したCSS3アニメーションを見てください。もちろん、それはWebkitとFirefoxだけです。

score 0 · Accepted Answer

アダム、もっと簡単なのは、HTMLにdivがすでに存在し、そのcssを次のように設定することです。

display: none; opacity: 0;

デフォルトでは。必要なアクションが発生したら、divの位置でcssトランジションを使用して、それらを上手くスライドさせ、バナナdivで不透明度トランジションを使用して、フェードインさせることができます。ボタンをクリックしたときにdivが入ってくるようにします。

3 に答える 3