Dans la grille CSS, les propriétés grid-template-columns
et grid-template-rows
vous permettent respectivement de définir les noms des lignes et de suivre la taille des colonnes et des lignes de la grille. La prise en charge de l'interpolation pour ces propriétés permet aux mises en page de grille d'effectuer une transition fluide entre les états, au lieu de l'ancrage à mi-chemin d'une animation ou d'une transition.
Navigateurs pris en charge
- 107
- 107
- 66
- 16
Interpolation de valeur en CSS
En CSS, vous pouvez faire passer des propriétés d'une valeur à l'autre de façon fluide à l'aide de la propriété transition
.
#target {
opacity: 0.5;
transition: opacity ease-in-out 0.25s;
}
#target:hover {
opacity: 1;
}
Le moteur de rendu détecte automatiquement le type de valeur de la propriété ciblée et utilise ces informations pour passer en douceur à la nouvelle valeur.
Exemple :
- Vous passez de
opacity
de0
à1
? Il s'agit d'une interpolation numérique. - Vous passez de
background-color
dewhite
àblack
? Fondu entre les couleurs source et cible. - Vous passez à
width
? Interpolez des unités numériques et convertissez des unités si nécessaire.
Il en va de même pour les animations CSS, où le navigateur effectue une interpolation de valeur entre les images clés.
Interpolation de grid-template-columns
et grid-template-rows
Grâce à nos contributeurs de Microsoft, Chrome, à partir de la version 107, est en mesure d'interpoler les valeurs grid-template-columns
et grid-template-rows
.
Les mises en page en grille peuvent passer d'un état à l'autre de manière fluide, au lieu de s'ancrer à la moitié d'une animation ou d'une transition.
Dans la démo située en dessous, une grille présente plusieurs avatars. Pour économiser de l'espace, les avatars sont superposés les uns sur les autres en limitant la largeur de chaque colonne à l'aide de grid-template-columns
. Lorsque l'utilisateur pointe dessus, chaque colonne bénéficie de plus d'espace.
.avatars {
display: grid;
gap: 0.35em;
grid-auto-flow: column;
grid-template-columns: repeat(4, 2em);
transition: all ease-in-out 0.25s;
}
.avatars:hover {
grid-template-columns: repeat(4, 4em);
}
Une fois la propriété transition
en place, la grille effectue une interpolation fluide entre les valeurs.
L'effet s'applique également aux animations qui modifient les valeurs grid-template-columns
ou grid-template-rows
.
Fait partie de la série sur les nouvelles technologies interopérables