Les propriétés de disposition de la grille CSS peuvent-elles être animées ?

Animation des propriétés de disposition de la grille CSS

Malgré la spécification CSS Grid Layout indiquant que les transitions doivent s'appliquer aux colonnes de modèle de grille et au modèle de grille -rows, cela ne fonctionne pas actuellement dans la plupart des navigateurs.

Actuel Implémentation :

Firefox prend en charge l'animation des propriétés de grille et fournit un exemple ici :
https://codepen.io/matuzo/post/animating-css-grid-layout-properties

Attention :

La structure de la grille ne peut pas changer lors de l'animation de la ligne et dimensions des colonnes. Par exemple, l'ajout ou la suppression de lignes interromprait l'animation.

Code de test :

Considérez le 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>
  <!-- Additional items -->
</grid-container>

Remarque : Le code de test dans cet exemple est entouré de commentaires HTML pour un affichage correct.

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!