Ich freue mich, ein Licht auf die Tatsache zu werfen, dass CSS grid-template-rows und grid-template-columns Eigenschaften sind jetzt animierbar in allen gängigen Webbrowsern! Nun, CSS Grid hat Animationen schon lange technisch unterstützt direkt in die CSS-Grid-Layout-Modul-Level-1-Spezifikation eingebaut.
Aber die Animation dieser Grid-Eigenschaften wird erst seit kurzem von allen drei großen Browsern unterstützt. Sollen wir uns ein paar Beispiele ansehen, um der Kreativität freien Lauf zu lassen?
Inhaltsverzeichnis
Beispiel 1: Erweitern der Seitenleiste
Zunächst einmal reden wir hiervon:
Ein einfaches zweispaltiges Raster. Jetzt, vorher vielleicht nicht Ich habe dies mit CSS Grid erstellt, weil Animationen und Übergänge nicht unterstützt wurden, aber was wäre, wenn Sie wollten, dass die linke Spalte – vielleicht eine Seitenleistennavigation – beim Hover erweitert wird? Nun, das ist jetzt möglich.
Ich weiß was du denkst: „Eine CSS-Eigenschaft animieren? Kinderleicht, mache ich schon seit Jahren!“ Ich auch. Beim Experimentieren mit einem bestimmten Anwendungsfall stieß ich jedoch auf einen interessanten Haken.
Also wollen wir das Grid selbst umstellen (insbesondere grid-template-columns, die auf eingestellt ist .grid Klasse im Beispiel). Aber die linke Spalte (.left) ist der Selektor, der die erfordert :hover Pseudo-Klasse. Während JavaScript dieses Rätsel leicht lösen kann – danke, aber nein danke – können wir es allein mit CSS erreichen.
Lassen Sie uns das Ganze durchgehen, beginnend mit dem HTML. Ziemlich Standard-Zeug wirklich … ein Raster mit zwei Spalten.
<div class="grid"> <div class="left"></div> <div class="right"></div>
</div>Abgesehen vom kosmetischen CSS müssen Sie zuerst festlegen display: grid auf dem übergeordneten Container (.grid).
.grid { display: grid;
}Als Nächstes können wir die beiden Spalten mithilfe von definieren und ihre Größe festlegen grid-template-columns Eigentum. Wir machen die linke Spalte superschmal und vergrößern später ihre Breite beim Hover. Die rechte Spalte nimmt dank der den Rest des verbleibenden Platzes ein auto Stichwort.
.grid { display: grid; grid-template-columns: 48px auto;
}Wir wissen, dass wir dieses Ding animieren werden, also machen wir weiter und werfen ein transition da drin, wenn wir schon dabei sind, damit der Wechsel zwischen den Zuständen glatt und spürbar ist.
.grid { display: grid; grid-template-columns: 48px auto; transition: 300ms; /* Change as needed */
}Das war's für die .grid! Es bleibt nur noch, den Hover-Zustand anzuwenden. Insbesondere werden wir die überschreiben grid-template-columns -Eigenschaft, sodass die linke Spalte beim Hover mehr Platz einnimmt.
Das allein ist nicht so interessant, obwohl es großartig ist, dass Animationen und Übergänge jetzt in CSS Grid unterstützt werden. Interessanter ist, dass wir das relativ Neue verwenden können :has() Pseudoklasse um den übergeordneten Container zu stylen (.grid) während das Kind (.left) schwebte.
.grid:has(.left:hover) { /* Hover styles */
}Im Klartext heißt das: „Machen Sie etwas mit dem .grid Container, wenn er ein Element namens enthält .left darin, das sich in einem schwebenden Zustand befindet.“ Deshalb ist :has() wird oft als „Eltern“-Selektor bezeichnet. Wir können endlich einen Elternteil basierend auf den darin enthaltenen Kindern auswählen – kein JavaScript erforderlich!
Vergrößern wir also die Breite der .left Spalte zu 30% wenn es schwebt. Die .right Spalte wird weiterhin den gesamten verbleibenden Platz einnehmen:
.grid { display: grid; transition: 300ms; grid-template-columns: 48px auto;
} .grid:has(.left:hover) { grid-template-columns: 30% auto;
}Wir könnten auch CSS-Variablen verwenden, die je nach Ihren persönlichen Vorlieben sauberer aussehen oder auch nicht (oder Sie verwenden möglicherweise sowieso CSS-Variablen in Ihrem Projekt):
.grid { display: grid; transition: 300ms; grid-template-columns: var(--left, 48px) auto;
} .grid:has(.left:hover) { --left: 30%;
}I ich liebe dass CSS-Raster jetzt animiert werden können, aber die Tatsache, dass wir dieses spezielle Beispiel mit nur neun CSS-Zeilen erstellen können, ist noch erstaunlicher.
Hier ist ein weiteres Beispiel von Olivia Ng — ähnliches Konzept, aber mit Inhalt (klicken Sie auf das Navigationssymbol):
Beispiel 2: Expanding-Panels
Dieses Beispiel überführt den Rastercontainer (die Spaltenbreiten), aber auch die einzelnen Spalten (ihre Hintergrundfarben). Es ist ideal, um beim Hover mehr Inhalt bereitzustellen.
Es sei daran erinnert, dass die repeat() -Funktion erzeugt manchmal fehlerhafte Übergänge, weshalb ich die Breite jeder Spalte einzeln festlege (dh grid-template-columns: 1fr 1fr 1fr).
Beispiel 3: Zeilen und Spalten hinzufügen
Dieses Beispiel „fügt“ animiert eine Spalte zum Raster hinzu. Allerdings – Sie haben es erraten – hat dieses Szenario auch eine Falle. Voraussetzung ist, dass die Spalte „neu“ nicht ausgeblendet (also auf gesetzt) werden darf display: none), und CSS Grid muss seine Existenz bestätigen, während es seine Breite auf setzt 0fr.
Also, für ein dreispaltiges Raster – grid-template-columns: 1fr 1fr 0fr (Ja, die Einheit muss deklariert werden, obwohl der Wert ist 0!) geht in über grid-template-columns: 1fr 1fr 1fr richtig, aber grid-template-columns: 1fr 1fr nicht. Im Nachhinein macht dies tatsächlich Sinn, wenn man bedenkt, was wir wissen wie Übergänge funktionieren.
Hier ist ein weiteres Beispiel von Michelle Bärker — gleiches Konzept, aber mit einer zusätzlichen Spalte und Menge mehr Pepp. Stellen Sie sicher, dass Sie dieses im Vollbildmodus ausführen, da es tatsächlich reagiert (keine Trickserei, nur gutes Design!).
Noch ein paar Beispiele
Weil warum nicht?
Dieses „Animated Mondrian“ ist der ursprüngliche Proof of Concept für animierte CSS-Raster von Chrome DevReldem „Vermischten Geschmack“. Seine grid-row's und grid-column's nutzen die span Schlüsselwort, um das Layout zu erstellen, das Sie vor sich sehen, und dann das grid-template-rowund grid-template-column's werden mit einer CSS-Animation animiert. Es ist bei weitem nicht so komplex, wie es aussieht!
Dasselbe Konzept, aber mit mehr von diesem Michelle-Barker-Pizzazz. Könnte einen netten Ladespinner machen?
Abschließend mit ein wenig Nostalgie (zeigt hier mein Alter), das nicht sehr grimmige animierte CSS-Raster von Andreas Harvard. Nochmals – dasselbe Konzept – es ist nur so, dass Sie die anderen Rasterelemente nicht sehen können. Aber keine Sorge, sie sind da.
- SEO-gestützte Content- und PR-Distribution. Holen Sie sich noch heute Verstärkung.
- Platoblockkette. Web3-Metaverse-Intelligenz. Wissen verstärkt. Hier zugreifen.
- Quelle: https://css-tricks.com/animating-css-grid-how-to-examples/
