Animer la grille CSS (comment faire des exemples)

Les propriétés

CSS Grid grid-template-rows et grid-template-columns sont désormais disponibles pour l'animation dans tous les principaux navigateurs! En fait, la grille CSS a longtemps pris en charge les animations car elle est intégrée à la spécification de niveau 1 du module de mise en page CSS Grid.

Mais jusqu'à récemment, les trois principaux navigateurs prennent entièrement une animation entièrement l'animation de ces propriétés de maillage. Voyons quelques exemples pour inspirer votre créativité!

Catalogue

• Catalogue
• Exemple 1: Développez la barre latérale
• Exemple 2: Développez le panneau
• Exemple 3: Ajouter des lignes et des colonnes
• Plus d'exemples

Exemple 1: Développez la barre latérale

Tout d'abord, c'est ce dont nous allons discuter:

Une grille simple à deux colonnes. Auparavant, vous ne l'auriez probablement pas construit avec la grille CSS parce que les animations et les transitions ne sont pas prises en charge, mais que se passe-t-il si vous voulez que la colonne de gauche (probablement la navigation latérale) se développe? Maintenant, c'est possible.

Je sais ce que vous pensez: "Animation CSS Attributs? Un morceau de gâteau, je le fais depuis de nombreuses années!" Cependant, j'ai rencontré un obstacle intéressant lors de l'essai d'un cas d'utilisation spécifique.

donc nous voulons convertir le maillage lui-même (en particulier le .grid défini sur la classe grid-template-columns dans l'exemple). Mais la colonne de gauche (.left) est le sélecteur qui nécessite la pseudo-classe :hover. Bien que JavaScript puisse facilement résoudre ce problème - merci, pas besoin - nous pouvons l'implémenter avec seulement CSS.

Expliquons tout le processus étape par étape, en commençant par HTML. C'est en fait très standard ... une grille avec deux colonnes.

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

CSS décoratif Mis à part, vous devez d'abord définir .grid sur le conteneur parent (display: grid).

.grid {
  display: grid;
}

Ensuite, nous pouvons utiliser l'attribut grid-template-columns pour définir et redimensionner les deux colonnes. Nous définissons la colonne de gauche très étroite et augmentons plus tard sa largeur lors du plan de plan. La colonne à droite occupera le reste de l'espace, grâce au mot-clé auto.

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

Nous savons que nous voulons l'animer, alors ajoutons un effet de transition tout en ajoutant l'animation afin que les changements entre les états soient lisses et évidents.

.grid {
  display: grid;
  grid-template-columns: 48px auto;
  transition: 300ms; /* 根据需要更改 */
}

.grid C'est fait! Le reste est l'état de survol de l'application. Plus précisément, nous remplacerons la propriété grid-template-columns afin que la colonne de gauche occupe plus de place lors du plan de planage.

Cela seul n'est pas si amusant, bien que CSS Grid prenne désormais en charge l'animation et les transitions. Ce qui est plus intéressant, c'est que nous pouvons utiliser la pseudo-classe relativement nouvelle pour styliser le conteneur parent (:has()) lorsque l'élément enfant (.left) est plané. .grid

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

En anglais simple, cela signifie: "Si le conteneur .grid contient un élément nommé .left et que l'élément plane, alors effectuez des opérations sur le conteneur .grid". " Nous pouvons enfin sélectionner l'élément parent en fonction des éléments enfants qu'il contient - aucun javascript n'est requis! :has()

Alors, augmentons la largeur de la colonne

à 30% lors de la volonté. La colonne .left continuera d'occuper tout l'espace restant: .right

.grid {
  display: grid;
}

Nous pouvons également utiliser des variables CSS, qui peuvent ou non sembler concises, selon vos préférences personnelles (ou vous pouvez déjà utiliser les variables CSS dans votre projet):

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

J'aime vraiment les grilles CSS peuvent désormais faire des animations, mais le fait que nous pouvons construire cet exemple particulier avec seulement neuf lignes de code CSS est encore plus étonnante.

Ceci est un autre exemple d'Olivia ng - un concept similaire, mais contient du contenu (cliquez sur l'icône de navigation):

Exemple 2: Développez le panneau

Cet exemple convertit le récipient de grille (largeur de la colonne) et convertit également les colonnes individuelles (leur couleur d'arrière-plan). Il est parfait pour fournir plus de contenu sur planant.

Il convient de se rappeler que la fonction

produit parfois de mauvaises transitions, c'est pourquoi je définis la largeur de chaque colonne séparément (c'est-à-dire repeat()). grid-template-columns: 1fr 1fr 1fr

Exemple 3: Ajouter des lignes et des colonnes

Cet exemple anime une colonne à la grille. Mais - vous l'avez deviné - il y a aussi un piège pour cette situation. L'exigence est que la "nouvelle" colonne ne peut pas être cachée (c'est-à-dire définie sur

) et que la grille CSS doit reconnaître son existence lorsqu'elle définit sa largeur sur 0FR. display: none

Donc, pour une grille à trois colonnes -

(oui, l'unité doit être déclarée même si la valeur est 0!) Sera convertie correctement en grid-template-columns: 1fr 1fr 0fr, mais grid-template-columns: 1fr 1fr 1fr ne le fera pas. Avec le recul, cela est en fait complètement raisonnable étant donné notre compréhension du fonctionnement de la transition. grid-template-columns: 1fr 1fr

Ceci est un autre exemple de Michelle Barker - le même concept, mais avec une colonne et des effets plus cool. Assurez-vous d'exécuter cet exemple en mode plein écran, car il est réellement réactif (pas de trucs, juste une bonne conception!).

Plus d'exemples

Pourquoi pas?

Ce "Mondrian animé" est la preuve initiale de concept pour les grilles CSS animées produites par Chrome DeVrel.

et grid-row Utilisez les mots clés grid-column pour créer la mise en page que vous voyez avant vous, puis utilisez l'animation CSS pour animer span et grid-template-row. Ce n'est pas aussi compliqué qu'il n'y paraît! grid-template-column

Même concept, mais plus des effets cool de Michelle Barker. Pouvez-vous faire un bon fileur de chargement?

Enfin, passez en revue la nostalgie (je vieillit ici), Andrew Harvard fait une grille CSS animée qui ne ressemble pas à une grille. Idem - le même concept - vous ne pouvez tout simplement pas voir d'autres éléments de la grille. Mais ne vous inquiétez pas, ils sont là.

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!