CSS -Animation ist einfach und einfach zu bedienen, aber komplexe Szenen sind äußerst schwierig. Ändern Sie beispielsweise die Hintergrundfarbe der Taste, wenn die Maus schwebt? Einfach. Aber Animation die Position und Größe der Elemente in einer hohen Weise und beeinflusst die Position anderer Elemente? Hart! In diesem Artikel wird dieses Problem eingehend untersucht.
Ein häufiges Beispiel ist das Entfernen eines Elements aus einer Reihe von Elementen . Die oben gestapelten Gegenstände müssen nach unten bewegt werden, um die Lücken in den von der Unterseite des Stapel entfernt zu entfernen. So funktioniert es im wirklichen Leben, und Benutzer können diese realistische Bewegung auf der Website erwarten. Wenn nicht, fühlen sich Benutzer möglicherweise verwirrt oder vorübergehend verloren. Basierend auf Lebenserfahrung erwarten Sie, dass etwas auf eine bestimmte Weise funktioniert und völlig unterschiedliche Ergebnisse erzielt, und der Benutzer benötigt möglicherweise zusätzliche Zeit, um mit dieser unrealistischen Bewegung umzugehen.
Hier ist eine Benutzeroberfläche zum Hinzufügen eines Elements (Klicken auf eine Schaltfläche) oder ein Element entfernt (Klicken auf ein Projekt).
Sie können die schlechte Benutzeroberfläche leicht maskieren, indem Sie Animationen usw. "Ausblenden" usw. hinzufügen, aber das Ergebnis wird nicht großartig, da die Liste plötzlich zusammenbricht und dieselben kognitiven Probleme verursacht.
Das Anwenden von CSS-Animationen auf dynamische DOM-Ereignisse (Hinzufügen brandneuer Elemente und vollständiges Entfernen von Elementen) ist äußerst schwierig . Wir werden uns diesem Problem direkt gegenübersehen und drei verschiedene Animationstypen einführen, um dieses Problem zu lösen, die alle das Ziel erreichen, den Benutzern dabei zu helfen, Änderungen in der Projektliste zu verstehen. Nach Abschluss dieses Artikels können Sie diese Animationen verwenden oder Ihre eigenen Animationen basierend auf diesen Konzepten erstellen.
Wir werden auch kurz die Barrierefreiheit abdecken und wie detaillierte HTML -Layouts noch eine gewisse Kompatibilität mit Hilfsgeräten mit ARIA -Eigenschaften erhalten.
Ein sehr moderner Ansatz (und mein persönlicher Favorit) besteht darin, vertikal ein- und auszublenden, je nachdem, wo sie irgendwann ankommen werden. Dies bedeutet auch, dass die Liste eine Position (ebenfalls animiert) "geöffnet" werden muss, um Platz dafür zu schaffen. Wenn ein Element die Liste verlässt, muss der Raum, den es besetzt, schrumpfen.
Da wir gleichzeitig viele verschiedene Operationen ausführen, müssen wir die DOM .list-item Struktur so ändern, dass sie jeweils in eine ordnungsgemäß benannte .list-container Containerklasse einwickeln. Dies ist absolut von entscheidender Bedeutung, damit unsere Animations funktioniert.
Jetzt ist dieser Stil unorthodox, denn damit wir später die Liste animieren müssen, müssen wir die Liste auf eine sehr spezifische Weise stylen, was auf Kosten einiger idiomatischer CSS -Praktiken durchgeführt wird.
.List {
Listenstil: Keine;
}
.List-container {
Cursor: Zeiger;
Schriftgröße: 3,5Rem;
Höhe: 0;
Listenstil: Keine;
Position: Relativ;
Text-Align: Mitte;
Breite: 300px;
}
.List-container: nicht (: Erstkind) {
Rand: 10px;
}
.List-container .List-item {
Hintergrundfarbe: #D3D3D3;
links: 0;
Polsterung: 2REM 0;
Position: absolut;
Top: 0;
Übergang: Alle 0,6s-Entlastungsausfälle;
Breite: 100%;
}
.Add-btn {
Hintergrundfarbe: transparent;
Grenze: 1PX Solid Black;
Cursor: Zeiger;
Schriftgröße: 2.5Rem;
Rand: 10px;
Polsterung: 2REM 0;
Text-Align: Mitte;
Breite: 300px;
} Zunächst verwenden wir margin-top , um einen vertikalen Raum zwischen Elementen im Stapel zu schaffen. Am unteren Rand gibt es keine Margin, so dass andere Listenelemente die von den entfernte Listenelemente erstellte Lücke füllen können. Auf diese Weise hat sie, selbst wenn wir die Behälterhöhe auf Null setzen, immer noch Ränder unten. Der zusätzliche Speicherplatz wird zwischen den Listenelementen direkt unter den gelöschten Listenelementen erstellt. Und das gleiche Listenelement sollte als Antwort auf die Containerhöhe des gelöschten Listenelements nach oben verschoben werden. Da dieser zusätzliche Raum die vertikale Lücke zwischen Listenelementen weiter erweitert, verwenden wir margin-top um dies zu verhindern.
Aber wir tun dies nur, wenn der fragliche Projektcontainer nicht das erste Element in der Liste ist. Aus diesem Grund verwenden wir :not(:first-child) - es lokalisiert alles außer dem ersten Behälter (Selector aktivieren). Wir tun dies, weil wir nicht möchten, dass das erste Listenelement von der oberen Kante der Liste nach unten drückt. Wir möchten nur, dass dies danach in allen Elementen geschieht, da sie direkt unter einem anderen Listenelement liegen und das erste Listenelement nicht ist.
Es ist unwahrscheinlich, dass dies total sinnvoll ist, da wir derzeit nicht die Höhe eines Elements auf Null setzen. Aber wir werden dies später tun, um den vertikalen Abstand zwischen Listenelementen korrekt zu machen, müssen wir die Ränder wie wir festlegen.
Eine andere Sache, die es wert ist, darauf hinzuweisen, ist die Tatsache, dass .list-item Elemente in ihren übergeordneten Elementen verschachtelt sind .list-container .list-container , sie sollen absolute Positionen haben, was bedeutet, dass sie außerhalb des DOM relativ zu ihrer relativen Positionierung positioniert sind. Wir tun dies, damit .list-item -Element beim Entfernen nach oben schwebt, während Sie andere Elemente .list-item bewegen und die Lücke füllen, indem Sie dieses Element .list-item Element entfernen. In diesem Fall bricht .list-container Element (nicht absolut positioniert und von der DOM betroffen) seine Höhe zusammen und ermöglicht es anderen Elementen .list-container Elemente, während .list-item -Element (in absoluter Weise) nach oben schwimmt, aber die Struktur der Liste nicht beeinflusst, wie sie nicht von der DOM betroffen ist.
Leider haben wir nicht genug getan, um eine geeignete Liste zu erhalten, in der einzelne Listenelemente nacheinander gestapelt sind. Stattdessen können wir im Moment nur ein .list-item sehen, das alle in derselben Position gestapelten Listenelemente darstellt. Dies liegt daran, dass, obwohl .list-item Element durch sein padding eine bestimmte Höhe haben kann, aber ihr übergeordnetes Element nicht, sondern eine Höhe von Null ist. Dies bedeutet, dass es nichts im DOM gibt, das diese Elemente tatsächlich voneinander trennt, da wir unsere .list-container Elemente benötigen, um eine bestimmte Höhe zu haben, da sie im Gegensatz zu ihren Kinderelementen von der DOM betroffen sind.
Damit unsere Listenbehälter genau mit der Höhe ihrer Kinderelemente übereinstimmen, müssen wir JavaScript verwenden. Daher speichern wir alle Listenelemente in einer Variablen. Dann erstellen wir eine Funktion, die unmittelbar nach dem Laden des Skripts aufgerufen wird.
Dies wird zu einer Funktion, die die Höhe des Listen -Containerelements übernimmt:
const listItems = document.querySelectorAll ('. List-item');
Funktion calcultHeightofListContainer () {
};
CalculateHeightofListContainer (); Das erste, was wir tun, ist das erste .list-item -Element aus der Liste. Wir können dies tun, weil sie alle gleich groß sind. Es spielt also keine Rolle, welches Element wir verwenden. Sobald wir darauf zugreifen, speichern wir seine Höhe in Pixeln über die clientHeight -Eigenschaft des Elements. Danach erstellen wir eine neue