ist es möglich, Flexbox-Einsätze & amp; entfernt?

Wenn ich Sie entfernen ein Element aus einer flexbox, die verbleibenden Elemente "einrasten" in Ihren neuen Positionen sofort, anstatt zu animieren.

Konzeptionell, da die Elemente verändern Ihre Positionen, ich würde erwarten, dass die übergänge zu bewerben.

Habe ich die transition-Eigenschaft auf alle beteiligten Elemente (die flexbox und die Kinder)

Gibt es eine Möglichkeit zum animieren von änderungen (fügt hinzu, & löschen), um eine flexbox? Dies ist tatsächlich ein schwerwiegendes Problem für mich und das fehlende Stück mit flexbox.

InformationsquelleAutor der Frage mmaclaurin | 2012-06-19

  1. 19

    Habe ich behoben @skyline3000 die demo basiert auf diesem Beispiel von Baumhaus. Nicht sicher, ob dies wird brechen wieder, wenn der Browser zu ändern, aber dies scheint in der beabsichtigten Art und Weise zu animieren, flex-Größe ändert:

    http://jsfiddle.net/2gbPg/2/

    Auch ich verwendet jQuery, aber es technisch nicht erforderlich ist.

    .flexed {
    background: grey;
    /* The border seems to cause drawing artifacts on transition. Probably a browser bug. */
    /* border: 1px solid black; */
    margin: 5px;
    height: 100px;
    flex-grow: 1;
    transition: flex-grow 1000ms linear;
}

.removed {
    /* Setting this to zero breaks the transition */
    flex-grow: 0.00001;
}

    Eine Sache zu beachten, über die CSS ist man kann nicht übergang zu einer flex-grow null, es wird nicht der übergang, es wird einfach verschwinden. Sie müssen nur einen sehr kleinen Wert. Auch scheint es ein Artefakte-bug beim zeichnen von Grenzen, also ich habe einen hintergrund in diesem Fall.

    InformationsquelleAutor der Antwort Chris Nicola

  2. 1

    Ich versehentlich bekam es zu arbeiten, in einer einfachen Weise.
    Im Grunde legen Sie width:0;flex-grow:1 und natürlich hinzufügen transition:all 2s; - und das ist es. Es ist eine eigenartige hack.

    Sehen, es funktioniert

    InformationsquelleAutor der Antwort John Balvin Arias

Schreibe einen Kommentar