CSS3フローティングdivのアニメーションレイアウトの変更

Question

ウィンドウのサイズを変更すると、フローティングdivは次の行に期待通りに折り返されます。しかし、私は本当にこのレイアウトの変更がアニメーション化されることを願っています。

編集：これ以外にも、JQueryに依存しないソリューションを見つけることができればうれしいです。私が必要なら私は自分のjsを書いても構いません。理想的には、私はAngularJSディレクティブにこれを実装したいと思っています。なぜなら、jQueryの依存関係を望まない理由です。ここで

は、私のコードの短縮版である：http://jsfiddle.net/cDS7Q/3/

HTML

<div id="content"> 

    <div>&nbsp;</div> 
    <div>&nbsp;</div> 
    <div>&nbsp;</div> 
    <div>&nbsp;</div> 
    <div>&nbsp;</div> 

</div> 

そして、ここでは私のCSS

body {background-color: #333;} 

#content div { 
    position: relative; 
    float: left; 
    background-color: #eee; 
    margin-left: 10px; 
    margin-bottom: 10px; 
    width: 100px; 
    height: 100px; 

    -webkit-transition: all .2s ease; 
    -moz-transition: all .2s ease; 
    -ms-transition: all .2s ease; 
    -o-transition: all .2s ease; 
    transition: all .2s ease; 
} 

#content { 
    margin-top: 50px; 
    padding-top: $gutter; 
    padding-bottom: 50px; 
    overflow: hidden; 
    width: 100%; 
} 

である私が達成しようとしている効果はこれにsimilairですサイト：http://saffron-consultants.com/journal/

ウィンドウのサイズをブロックが新しい位置にアニメートするのを見てください。

Answer 1

あなたはこれのためにクイックサンドを試すことができます。 http://razorjack.net/quicksand/

Answer 2

cssでは可能ですが、メディアクエリでパラメータを変更した場合にのみ可能です。例えば

：

アニメーションを取得するよりも、あなたは、メディアクエリを持つ要素の幅、またはパディングとマージンを変更した場合

。 また、Divsを絶対または相対に配置し、メディアクエリ内の位置を変更すると、それは機能します。

しかし、単純なフローティング/ラッピングではありません。そのためにはJavaScript/jQueryが必要です。例えば

あなたのフィドルにこれを追加します。

body { 
    background-color: #333; 
} 

#content div { 
    position: relative; 
    float: left; 
    background-color: #eee; 
    margin-left: 20px; 
    margin-bottom: 20px; 
    width: 200px; 
    height: 200px; 

    -webkit-transition: all .7s ease; 
    -moz-transition: all .2s ease; 
    -ms-transition: all .7s ease; 
    -o-transition: all .7s ease; 
    transition: all .7s ease; 
} 

#content { 
    margin-top: 50px; 
    padding-top: $gutter; 
    padding-bottom: 50px; 
    overflow: hidden; 
    width: 100%; 
} 

@media screen and (max-width: 480px) { 
#content div { 
    margin-left: 10px; 
    margin-bottom: 10px; 
    width: 100%; 
    height: 100px; 
    } 

}