Können CSS-Rasterlayout-Eigenschaften animiert werden?

Animieren von CSS-Rasterlayout-Eigenschaften

Trotz der CSS-Rasterlayout-Spezifikation, die angibt, dass Übergänge für Grid-Template-Columns und Grid-Template gelten sollten -rows, es funktioniert derzeit in den meisten Browsern nicht.

Aktuell Implementierung:

Firefox unterstützt das Animieren von Rastereigenschaften und stellt hier ein Beispiel bereit:
https://codepen.io/matuzo/post/animating-css-grid-layout-properties

Vorbehalt:

Die Rasterstruktur kann sich beim Animieren der Zeile nicht ändern und Säulenabmessungen. Beispielsweise würde das Hinzufügen oder Entfernen von Zeilen die Animation unterbrechen.

Testcode:

Betrachten Sie den folgenden Test:

grid-container {
  display: inline-grid;
  grid-template-columns: 100px 20vw 200px;
  grid-template-rows: repeat(2, 100px);
  background-color: black;
  height: 230px;
  transition: 2s;
}

grid-container:hover {
  grid-template-columns: 50px 10vw 100px;
  grid-template-rows: repeat(2, 50px);
  background-color: red;
  height: 130px;
  transition: 2s;
}

grid-item {
  background-color: lightgreen;
}

<grid-container>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <!-- Additional items -->
</grid-container>

Hinweis: Der Testcode in diesem Beispiel ist zur ordnungsgemäßen Anzeige in HTML-Kommentare eingeschlossen.

Das obige ist der detaillierte Inhalt vonKönnen CSS-Rasterlayout-Eigenschaften animiert werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!