Les transitions CSS fonctionnent-elles sur les « grid-template-columns » et « grid-template-rows » dans tous les navigateurs ?

Utilisation des transitions CSS dans la disposition de la grille CSS

Dans votre extrait de code, vous avez correctement implémenté les transitions CSS pour animer la hauteur du wrapper classe (grille-modèle-lignes). Cependant, les transitions pour les propriétés CSS Grid ne sont pas encore prises en charge dans tous les navigateurs.

La spécification actuelle indique que les transitions doivent fonctionner sur les colonnes de modèle de grille et les lignes de modèle de grille tant que les seules modifications concernent le valeurs des propriétés. Cependant, dans certains navigateurs, les transitions sur ces propriétés peuvent ne pas fonctionner.

Il existe une implémentation mise à jour qui permet les transitions sur les colonnes de modèle de grille et les lignes de modèle de grille. Cette implémentation n'est actuellement prise en charge que dans Firefox.

Code de test :

Pour tester si les transitions sur les colonnes de modèle de grille et les lignes de modèle de grille fonctionnent dans votre navigateur , vous pouvez utiliser le code 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>

Si la hauteur et la largeur de la grille changent en douceur lors du survol du conteneur dans Firefox, les transitions sur les colonnes de modèle de grille et les lignes de modèle de grille sont prises en charge dans votre navigateur.

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!