Animation d'une grille CSS (Comment faire + Exemples)

Animation d’une grille CSS (Comment faire + Exemples) | Astuces CSS

Je suis ravi de mettre en lumière le fait que le CSS grid-template-rows et grid-template-columns les propriétés peuvent désormais être animées dans tous les principaux navigateurs Web ! Eh bien, CSS Grid prend en charge techniquement les animations depuis longtemps, car il est intégré directement dans la spécification CSS Grid Layout Module Level 1.

Mais l’animation de ces propriétés de grille n’a été prise en charge que récemment par les trois principaux navigateurs. Allons-nous jeter un coup d’œil à quelques exemples pour faire couler le jus créatif ?

Tout d’abord, voici de quoi nous parlons :

Une grille simple à deux colonnes. Maintenant, avant, vous pourriez pas Je l’ai construit en utilisant CSS Grid parce que les animations et les transitions n’étaient pas prises en charge, mais que se passe-t-il si vous vouliez que la colonne de gauche – peut-être une barre de navigation latérale – se développe au survol ? Eh bien, maintenant c’est possible.

Je sais ce que tu penses: “Animer une propriété CSS ? C’est facile, je le fais depuis des années ! » Moi aussi. Cependant, j’ai rencontré un hic intéressant en expérimentant un cas d’utilisation particulier.

Donc, nous voulons faire la transition de la grille elle-même (en particulier grid-template-columnsqui est réglé sur le .grid classe dans l’exemple). Mais la colonne de gauche (.left) est le sélecteur qui requiert le :hover pseudo-classe. Alors que JavaScript peut facilement résoudre cette énigme – merci, mais non merci – nous pouvons le faire avec CSS seul.

Passons en revue le tout, en commençant par le HTML. Des trucs assez standard vraiment… une grille avec deux colonnes.

<div class="grid">
  <div class="left"></div>
  <div class="right"></div>
</div>

En mettant de côté le CSS cosmétique, vous devrez d’abord définir display: grid sur le conteneur parent (.grid).

.grid {
  display: grid;
}

Ensuite, nous pouvons définir et dimensionner les deux colonnes en utilisant le grid-template-columns propriété. Nous allons rendre la colonne de gauche super étroite, puis augmenter sa largeur au survol. La colonne de droite occupe le reste de l’espace restant, grâce au auto mot-clé.

.grid {
  display: grid;
  grid-template-columns: 48px auto;
}

Nous savons que nous allons animer cette chose, alors allons-y et lançons un transition là-dedans pendant que nous y sommes pour que le changement entre les états soit fluide et perceptible.

.grid {
  display: grid;
  grid-template-columns: 48px auto;
  transition: 300ms; /* Change as needed */
}

C’est tout pour le .grid! Il ne reste plus qu’à appliquer l’état de survol. Plus précisément, nous allons remplacer le grid-template-columns propriété afin que la colonne de gauche occupe une plus grande quantité d’espace au survol.

Cela seul n’est pas si intéressant, même s’il est génial que les animations et les transitions soient désormais prises en charge dans CSS Grid. Ce qui est plus intéressant, c’est que nous pouvons utiliser le relativement nouveau :has() pseudo-classe pour styliser le conteneur parent (.grid) tandis que l’enfant (.left) est survolé.

.grid:has(.left:hover) {
  /* Hover styles */
}

En clair, cela veut dire, “Fais quelque chose à la .grid conteneur s’il contient un élément nommé .left à l’intérieur de celui-ci qui est en état de vol stationnaire. C’est pourquoi :has() est souvent appelé sélecteur « parent ». Nous pouvons enfin sélectionner un parent en fonction des enfants qu’il contient – aucun JavaScript requis !

Donc, augmentons la largeur de la .left colonne à 30% lorsqu’il est survolé. Le .right colonne continuera à occuper tout l’espace restant :

.grid {
  display: grid;
  transition: 300ms;
  grid-template-columns: 48px auto;
}

.grid:has(.left:hover) {
  grid-template-columns: 30% auto;
}

Nous pourrions également utiliser des variables CSS, qui peuvent ou non sembler plus propres en fonction de vos préférences personnelles (ou vous utilisez peut-être de toute façon des variables CSS dans votre projet) :

.grid {
  display: grid;
  transition: 300ms;
  grid-template-columns: var(--left, 48px) auto;
}

.grid:has(.left:hover) {
  --left: 30%;
}

je aimer que les grilles CSS peuvent être animées maintenant, mais le fait que nous puissions construire cet exemple particulier avec seulement neuf lignes de CSS est encore plus étonnant.

Voici un autre exemple de Olivia Ng — concept similaire, mais avec du contenu (cliquez sur l’icône de navigation) :

Exemple 2 : Développer les panneaux

Cet exemple effectue la transition du conteneur de la grille (la largeur des colonnes) mais également des colonnes individuelles (leurs couleurs d’arrière-plan). C’est idéal pour fournir plus de contenu en survol.

Il est bon de rappeler que le repeat() produit parfois des transitions boguées, c’est pourquoi j’ai défini la largeur de chaque colonne individuellement (c’est-à-dire grid-template-columns: 1fr 1fr 1fr).

Exemple 3 : Ajouter des lignes et des colonnes

Cet exemple « ajoute » de manière animée une colonne à la grille. Cependant, vous l’avez deviné, ce scénario comporte également un écueil. L’exigence est que la “nouvelle” colonne ne doit pas être masquée (c’est-à-dire définie sur display: none), et CSS Grid doit reconnaître son existence tout en définissant sa largeur sur 0fr.

Donc, pour une grille à trois colonnes — grid-template-columns: 1fr 1fr 0fr (oui, l’unité doit être déclarée même si la valeur est 0!) se transforme en grid-template-columns: 1fr 1fr 1fr correctement, mais grid-template-columns: 1fr 1fr n’a pas. Avec le recul, cela prend tout son sens compte tenu de ce que nous savons du fonctionnement des transitions.

Voici un autre exemple de michelle barker — même concept, mais avec une colonne supplémentaire et parcelle plus de piquant. Assurez-vous d’exécuter celui-ci en mode plein écran car il est en fait réactif (pas de supercherie, juste un bon design !).

Quelques exemples supplémentaires

Parce que pourquoi pas ?

Ce “Animated Mondrian” est la preuve de concept originale pour les grilles CSS animées par Chrome DevRel. Le grid-row‘sable grid-columnutilisent le span mot-clé pour créer la mise en page que vous voyez devant vous, puis le grid-template-row‘sable grid-template-columnsont animés à l’aide d’une animation CSS. C’est loin d’être aussi complexe qu’il y paraît !

Même concept, mais avec plus de piquant de Michelle Barker. Pourrait faire un joli spinner de chargement?

Pour conclure avec un peu de nostalgie (montrant mon âge ici), la grille CSS animée pas très grille par Andrew Havard. Encore une fois – même concept – c’est juste que vous ne pouvez pas voir les autres éléments de la grille. Mais ne vous inquiétez pas, ils sont là.

InMy.Live