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>&nbsp;</div>
    <div>&nbsp;</div>
    <div>&nbsp;</div>
    <div>&nbsp;</div>
    <div>&nbsp;</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.
InformationsquelleAutor Andre | 2013-08-02
Schreibe einen Kommentar