Funktionieren CSS-Übergänge bei „grid-template-columns' und „grid-template-rows' in allen Browsern?

CSS-Übergänge im CSS-Rasterlayout verwenden

In Ihrem Code-Snippet haben Sie die CSS-Übergänge korrekt implementiert, um die Höhe des Wrappers zu animieren Klasse (grid-template-rows). Allerdings werden Übergänge für CSS-Grid-Eigenschaften noch nicht in allen Browsern unterstützt.

Die aktuelle Spezifikation besagt, dass Übergänge auf Grid-Template-Columns und Grid-Template-Zeilen funktionieren sollten, solange die einzigen Änderungen an den vorgenommen werden Werte der Eigenschaften. In einigen Browsern funktionieren Übergänge für diese Eigenschaften jedoch möglicherweise nicht.

Es gibt eine aktualisierte Implementierung, die Übergänge für Rastervorlagenspalten und Rastervorlagenzeilen ermöglicht. Diese Implementierung wird derzeit nur in Firefox unterstützt.

Testcode:

Um zu testen, ob Übergänge auf Grid-Template-Columns und Grid-Template-Zeilen in Ihrem Browser funktionieren , können Sie den folgenden Code verwenden:

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>
  <grid-item></grid-item>
  <grid-item></grid-item>
</grid-container>

Wenn sich die Höhe und Breite des Rasters reibungslos ändert, wenn Sie in Firefox mit der Maus über den Container fahren, dann Übergänge auf Grid-Template-Columns und Grid-Template -rows werden in Ihrem Browser unterstützt.

Das obige ist der detaillierte Inhalt vonFunktionieren CSS-Übergänge bei „grid-template-columns' und „grid-template-rows' in allen Browsern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!