Pourquoi les transitions CSS ne fonctionnent-elles pas sur les propriétés des modèles de grille dans tous les navigateurs ?

Dépannage des transitions dans la disposition de la grille CSS

Les transitions CSS peuvent être appliquées aux propriétés de la grille, permettant des animations fluides. Cependant, certaines conditions doivent être remplies pour que les transitions fonctionnent correctement.

Selon la spécification CSS, les transitions doivent fonctionner sur les propriétés grid-template-columns et grid-template-rows lorsque seules les valeurs changent, sans altérer les propriétés. la structure de la règle. Cependant, cela n’est actuellement pris en charge que dans Firefox. D'autres navigateurs peuvent l'implémenter dans les futures mises à jour.

Cas de test

Considérez le cas de test suivant :

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>

Dans ce cas , la transition ne fonctionnera pas dans les navigateurs autres que Firefox, bien qu'elle soit syntaxiquement correcte.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!