CSS3 Animierte Layoutänderung für schwebende divs

Question

Während Sie die Größe des Fensters ändern, werden die Floating Divs wie erwartet in die nächste Zeile verschoben. Aber ich möchte wirklich, dass diese Layoutänderung animiert wird.

EDIT: Als beiseite, wäre es schön, eine Lösung für diese zu finden, die nicht auf JQuery abhängt. Es macht mir nichts aus, meine eigene js zu schreiben, wenn ich muss. Idealerweise würde ich dies gerne in eine AngularJS-Direktive implementieren, sobald ich sehe, dass es funktioniert, und deshalb möchte ich die jQuery-Abhängigkeit nicht. Hier

ist eine verkürzte Version von meinem Code: 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> 

Und hier meine CSS ist

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%; 
} 

Der Effekt, den ich zu erreichen bin versucht similair dazu Standort: http://saffron-consultants.com/journal/

Größe ändern das Fenster zu Sieh die Blöcke in ihre neuen Positionen animieren.

Answer 1

Sie könnten Quicksand dafür versuchen. http://razorjack.net/quicksand/

Answer 2

Es ist möglich mit CSS, aber nur, wenn Sie Parameter mit Medienabfragen ändern.

Zum Beispiel:

Wenn Sie die Breite eines Elements oder die Polsterung und Marge mit Medienanfragen zu ändern, als Sie eine Animation erhalten. Auch wenn Sie divs absolut oder relativ positionieren und die Positionen in den Medienabfragen ändern, funktioniert es.

Aber nicht mit einfachem Floating/Wrapping. Dafür benötigen Sie JavaScript/jQuery.

zum Beispiel fügen Sie diese zu Ihrer Geige:

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; 
    } 

}