CSS3 Animieren layout ändern für floating divs
Als Sie die Fenstergröße ändern, die floatenden divs wird auf die nächste Zeile umbrochen, wie erwartet. Aber ich würde wirklich gerne dieses layout ändern, um animiert werden.
EDIT: nebenbei, es wäre schön, eine Lösung zu finden, das hängt nicht davon ab, JQuery. Ich bin nicht dagegen schreiben meiner eigenen js, wenn ich muss. Idealerweise würde ich gerne implementieren diese in eine AngularJS-Direktive sobald ich sehe es funktioniert, also damit, warum ich nicht wollen, dass die jQuery-Abhängigkeit.
Hier ist eine verkürzte version von meinem code: http://jsfiddle.net/cDS7Q/3/
HTML
<div id="content">
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
Und hier ist meine 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%;
}
Den Effekt, den ich versuche zu erreichen ist similair zu dieser Website: http://saffron-consultants.com/journal/
Verkleinern Sie das Fenster, um zu sehen, die Blöcke animieren, in Ihren neuen Positionen.
- Sollten Sie sich für einen js-plugin wie Isotop
- Danke. Ich war der Hoffnung, es ist möglich, ohne JS. Aber ich denke, es gibt Grenzen
- Am zweiten Gedanken,ich werde mit angularjs in diesem Projekt, und würde lieber etwas, das nicht davon abhängig, JQuery. Danke trotzdem für den Vorschlag. Vielleicht ist das Isotop-Quelle wird mich führen in eine gute Richtung.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Könnten Sie versuchen, Treibsand für diese.
http://razorjack.net/quicksand/
Ist es möglich mit css, aber nur, wenn Sie Parameter ändern mit media queries.
Beispiel:
Wenn Sie ändern Sie die Breite eines Elements, oder die padding-und margin-mit media queries, als Sie wird erhalten Sie eine animation.
Auch, wenn Sie die position der divs absolute oder relative, und ändern Sie die Positionen in den Medien Abfragen, dann ist es Arbeit.
Aber nicht mit simple floating /Verpackung. Dafür brauchst du JavaScript /jQuery.
beispielsweise fügen Sie diese zu Ihrem fiddle: