css3トランジション：フローティングアイテムの流体レイアウトアニメーション

Question

シルバーライトの流体レイアウトトランジション、またはskydriveの新しいCSSトランジションのフォトリストビューに見られるようなものを実現したいと思います。私はこれが何とかCSS3を使用して行うことができると思った。アイテムは、いくつかの正方形または画像か何かかもしれない

<div class="items"> 
    <div class="item"> 
     1 
    </div> 
    <div class="item"> 
     2 
    </div> 
    <div class="item"> 
     3 
    </div> 
</div> 

<style> 
    .item { 
     float: left; 
    } 
</style> 

：私はこのような何かを持っていると仮定し

。 サイズ変更時にアイテムをラップするアイテムのフローティングリストがあります。 私が達成したいのは、それらのアイテムを流暢にアニメーション化することです。次の行にラップするときに浮かべて、間に新しく追加されたアイテムを配置します。

これはおそらく絶対位置付けを使用していくつかのjavascriptマジックで行うことができますが、CSSレイアウトを犠牲にしてすべてを手動で行う必要があります。

transition: left, top 1s ease-in-out;のような言い方はありますか？

アイテム自体が絶対的な位置付けをしている間、フローティングされているいくつかの親divの中にアイテムをラップしようとしましたが、その位置はその親に相対的です。

Hereは、いくつかのエフェクトを表示するchannel9のビデオです。私は、約1:20に表示されているものについて話していました。

Answer 1

jQueryとまったく同じです。しかし、1秒間バックアップしてください。

私はぼんやりしているので、寝る必要があるので、これは半分の一貫性がある場合は謝罪しますが、正しい方向に向かうかもしれません。

まず、仕事に適したツールを検討することが重要です。 CSS3はすばらしいですが、後方互換性はあまり高くないので、古いブラウザのjavascriptに依存しています。もしあなたがそれを望むのであれば、Nuttutsは常に素晴らしいリソースです。article on CSS3：

jQuery（javascriptのライブラリ）をお勧めします。あなたは絶対的なポジショニングを使う必要はなく、それはあなたの特定の目標に関するものです。より具体的なアドバイスを得るには、それを投稿する必要があります。 Animate（）は、Fadin（）、fadeout（）のような、まさにその必要性に役立つ良い汎用関数です。サンプルを検索すると、探しているものを見つけることができます。

あなたが想像できるすべてのもののためのスクリプトが用意されています。あなたが探しているものを正確にスクリプト/プラグインとしてgoogleしています。チャンスは、そこにある。少なくとも一般的な概念でも、これはかなり一般的なニーズです。

幸運を祈る！ （あなたが問題を抱えている場合は、正確な目標/機能の詳細を送ってください、もしあなたがそれを持っていれば、サイトは現在のものです）