Warum funktionieren CSS-Übergänge nicht in allen Browsern auf Rastervorlageneigenschaften?

Fehlerbehebung bei Übergängen im CSS-Rasterlayout

CSS-Übergänge können auf Rastereigenschaften angewendet werden, was flüssige Animationen ermöglicht. Allerdings müssen bestimmte Bedingungen erfüllt sein, damit Übergänge ordnungsgemäß funktionieren.

Gemäß der CSS-Spezifikation sollten Übergänge bei den Eigenschaften „grid-template-columns“ und „grid-template-rows“ funktionieren, wenn sich nur die Werte ändern, ohne die Eigenschaften zu ändern Struktur der Regel. Dies wird jedoch derzeit nur in Firefox unterstützt. Andere Browser implementieren es möglicherweise in zukünftigen Updates.

Testfall

Betrachten Sie den folgenden Testfall:

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>

In diesem Fall , funktioniert die Umstellung in anderen Browsern als Firefox nicht, obwohl sie syntaktisch korrekt ist.

Das obige ist der detaillierte Inhalt vonWarum funktionieren CSS-Übergänge nicht in allen Browsern auf Rastervorlageneigenschaften?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!