Pourquoi mes transitions CSS ne fonctionnent-elles pas avec la disposition en grille CSS ?

Utilisation de transitions CSS dans la disposition de grille CSS

Problème :

Dans une implémentation d'un en-tête collant utilisant la disposition de grille CSS , un utilisateur a du mal à obtenir un effet de transition fluide car l'en-tête rétrécit lors du défilement vers le bas. Malgré l'ajout de transitions CSS à la classe .wrapper, l'animation ne se produit pas.

Analyse :

Selon la spécification CSS Grid Layout, les transitions devraient fonctionner sur la grille -propriétés de colonnes de modèle et de lignes de modèle de grille. Cependant, dans l'exemple fourni, les transitions ne sont pas appliquées.

Solution :

Pour l'instant, les transitions CSS sur les propriétés de la grille ne sont prises en charge que dans Firefox. Pour activer l'animation souhaitée, la mise en page doit être modifiée pour utiliser une méthode prise en charge. Une alternative consiste à utiliser Flexbox au lieu de Grid.

Voici un extrait de code mis à jour démontrant le correctif :

.wrapper {
  display: flex;
  height: 100vh;
  transition: all 0.5s;
}

.wrapper.tiny {
  height: 50vh;
}

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!