CSS Grid's grid-template-rows und grid-template-columns Eigenschaften sind jetzt in allen wichtigen Browsern zur Animation erh?ltlich! Tats?chlich hat CSS Grid seit langem unterstützte Animationen, da es in die Spezifikation "CSS Grid Layout" Level 1 integriert ist.

Aber bis vor kurzem unterstützen alle drei gro?en Browser die Animation dieser Mesh -Eigenschaften voll und ganz. Schauen wir uns einige Beispiele an, um Ihre Kreativit?t zu inspirieren!

Katalog

• Katalog
• Beispiel 1: Erweitern Sie die Seitenleiste
• Beispiel 2: Erweitern Sie das Panel
• Beispiel 3: Zeilen und Spalten
hinzufügen
• Weitere Beispiele

Beispiel 1: Erweitern Sie die Seitenleiste

Zun?chst einmal werden wir diskutieren:

Ein einfaches Zwei-Spal-Netz. Früher h?tten Sie es wahrscheinlich nicht mit CSS -Grid erstellt, da Animationen und überg?nge nicht unterstützt werden. Was ist jedoch, wenn Sie die linke Spalte (wahrscheinlich Seitenleistennavigation) um den Schweber erweitern m?chten? Das ist m?glich.

Ich wei?, was Sie denken: "Animations -CSS -Attribute? Ein Kinderspiel, ich mache es seit vielen Jahren!" Ich habe mich jedoch auf eine interessante Hürde gesto?en, als ich einen bestimmten Anwendungsfall ausprobierte.

Sie m?chten das Netz selbst konvertieren (insbesondere die .grid in der grid-template-columns -Klasse im Beispiel). Die linke Spalte (.left) ist jedoch der Selektor, der die Pseudoklasse :hover ben?tigt. W?hrend JavaScript dieses Problem leicht l?sen kann - danke, keine Notwendigkeit - k?nnen wir es nur mit CSS implementieren.

Erkl?ren wir den gesamten Prozess Schritt für Schritt, beginnend mit HTML. Es ist eigentlich sehr Standard ... ein Gitter mit zwei Spalten.

<div class="grid">
  <div class="left"></div>
  <div class="right"></div>
</div>

Abgesehen von

dekoratives CSS müssen Sie zun?chst .grid auf dem übergeordneten Container festlegen (display: grid).

.grid {
  display: grid;
}

Als n?chstes k?nnen wir das Attribut

verwenden, um die beiden Spalten zu definieren und zu ?ndern. Wir setzen die linke S?ule sehr schmal und erh?hen sp?ter ihre Breite, wenn wir schweben. Die Spalte rechts wird dank des Schlüsselworts grid-template-columns den Rest des Raums in Anspruch nehmen. auto

.grid {
  display: grid;
  grid-template-columns: 48px auto;
}

Wir wissen, dass wir es animieren m?chten. Fügen wir also einen übergangseffekt hinzu, w?hrend wir die Animation hinzufügen, damit die ?nderungen zwischen den Zust?nden reibungslos und offensichtlich sind.

.grid {
  display: grid;
  grid-template-columns: 48px auto;
  transition: 300ms; /* 根據(jù)需要更改 */
}

Es ist fertig! Der Rest ist der Antragsschwebezustand. Insbesondere werden wir die Eigenschaft .grid so überschreiben, dass die linke Spalte beim Schweben mehr Platz einnimmt. grid-template-columns

Dies allein macht keinen Spa?, obwohl CSS Grid jetzt Animation und überg?nge unterstützt. Interessanter ist, dass wir die relativ neue Pseudo-Klasse verwenden k?nnen, um den übergeordneten Container (

) zu stylen, wenn das untergeordnete Element (:has()) schwebt. .left

<div class="grid">
  <div class="left"></div>
  <div class="right"></div>
</div>

In einem einfachen Englisch bedeutet dies: "Wenn der .grid Container ein Element mit dem Namen .left enth?lt und das Element schwebt, dann werden einige Operationen auf dem .grid -Container ausgeführt." Wir k?nnen endlich das übergeordnete Element basierend auf den entsprechenden untergeordneten Elementen ausw?hlen - kein JavaScript ist erforderlich! :has()

Erh?hen wir also die Breite der

-S?ule beim Schweben auf 30%. Die Spalte .left wird weiterhin alle verbleibenden Raum einnehmen: .right

.grid {
  display: grid;
}

Wir k?nnen auch CSS -Variablen verwenden, die je nach Ihren pers?nlichen Einstellungen pr?gnant aussehen (oder Sie k?nnen bereits CSS -Variablen in Ihrem Projekt verwenden):

.grid {
  display: grid;
  grid-template-columns: 48px auto;
}

Ich mag wirklich, dass die CSS -Gitter jetzt Animationen machen k?nnen, aber die Tatsache, dass wir dieses spezielle Beispiel mit nur neun Zeilen von CSS -Code erstellen k?nnen, ist noch erstaunlicher.

Dies ist ein weiteres Beispiel für Olivia Ng - ein ?hnliches Konzept, enth?lt jedoch Inhalte (klicken Sie auf das Navigationssymbol):

Beispiel 2: Erweitern Sie das Panel

Dieses Beispiel wandelt den Gitterbeh?lter (Spaltenbreite) um und wandelt auch die einzelnen Spalten (ihre Hintergrundfarbe) um. Es ist perfekt, um mehr Inhalte für Schwebungen bereitzustellen.

Es ist sich daran zu erinnern, dass die

-Funktion manchmal falsche überg?nge erzeugt, weshalb ich die Breite jeder Spalte getrennt festgelegt habe (d. H. repeat()). grid-template-columns: 1fr 1fr 1fr

Beispiel 3: Zeilen und Spalten

hinzufügen

Dieses Beispiel annimmt eine Spalte zum Raster. Aber - Sie haben es erraten - gibt es auch eine Falle für diese Situation. Die Anforderung ist, dass die "neue" Spalte nicht verborgen werden kann (d. H. Auf

festgelegt) und dass das CSS -Raster seine Existenz anerkennen muss, wenn sie ihre Breite auf 0FR festlegt. display: none

Für ein dreispaliges Netz -

(Ja, das Ger?t muss auch dann deklariert werden, wenn der Wert 0 ist!), Wird korrekt in grid-template-columns: 1fr 1fr 0fr konvertiert, aber grid-template-columns: 1fr 1fr 1fr wird es nicht. Im Nachhinein ist dies angesichts unseres Verst?ndnisses, wie der übergang funktioniert, tats?chlich v?llig vernünftig. grid-template-columns: 1fr 1fr

Dies ist ein weiteres Beispiel für Michelle Barker - das gleiche Konzept, aber mit einer Spalte und mehr coolen Effekten. Stellen Sie sicher, dass Sie dieses Beispiel im Vollbildmodus ausführen, da es tats?chlich reagiert (keine Tricks, nur gutes Design!).

Weitere Beispiele

Warum nicht?

Dieser "animierte Mondrian" ist der erste Proof of Concept für animierte CSS -Gitter, der von Chrome Devrel produziert wird.

und grid-row Verwenden Sie die Schlüsselw?rter grid-column, um das vor Ihnen angezeigte Layout zu erstellen, und verwenden Sie dann die CSS -Animation, um span und grid-template-row zu animieren. Es ist nicht so kompliziert wie es scheint! grid-template-column

Gleiches Konzept, aber mehr von Michelle Barkers coolen Effekten. Kannst du einen guten Ladespinner machen?

überprüfen Sie endlich die Nostalgie (ich bin hier alt). Das gleiche - das gleiche Konzept - Sie k?nnen andere Rasterelemente einfach nicht sehen. Aber keine Sorge, sie sind da.

Das obige ist der detaillierte Inhalt vonCSS -Gitter animieren (Beispiele). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!