CSS -Gitter animieren (Beispiele)

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; /* 根据需要更改 */
}

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!