Simplifier les animations d'entrée avec @starting-style

Créer des animations d'entrée fluides peut être un défi. Les complexités des temps de chargement du DOM et de l'animation à partir de display: none conduisent souvent à des résultats frustrants. La règle @starting-style offre une solution simplifiée en vous permettant de définir explicitement les valeurs initiales des propriétés CSS lorsqu'un élément apparaît pour la première fois, garantissant ainsi des transitions transparentes dès le début.

Explorez l'article complet avec plus d'exemples ici.

---

Comprendre les fondamentaux

@starting-style définit l'état initial de vos propriétés CSS avant que l'élément ne devienne visible : son état "avant". L'état "après" est défini dans vos règles CSS standard. Voici comment cela fonctionne :

<code class="language-css">element {
  transition: opacity 0.5s ease-in;
  opacity: 1;

  @starting-style {
    opacity: 0;
  }
}</code>

Lors du chargement initial, @starting-style définit l'opacité de l'élément à 0. Il passe ensuite en douceur à l'état final (opacité : 1 dans ce cas). Cette fonctionnalité s'applique également lorsqu'un élément passe de display: none à visible, ce qui le rend parfait pour animer des éléments basculés.

Utiliser @starting-style

Vous pouvez appliquer @starting-style de deux manières : imbriqué dans l'ensemble de règles d'un élément (aucun sélecteur nécessaire) ou défini séparément avec un sélecteur.

Remarque importante : l'imbrication @starting-style dans un pseudo-élément (comme ::before ou ::after) ne fonctionnera pas comme prévu. Les styles affecteront l'élément parent, pas le pseudo-élément.

<code class="language-css">/* Standalone */
@starting-style {
  element {
    opacity: 0;
  }
}

element {
  opacity: 1;
  transition: opacity 0.5s ease-in;
}

/* Nested */
element {
  opacity: 1;
  transition: opacity 0.5s ease-in;

  @starting-style {
    opacity: 0;
  }
}</code>

Considération clé : @starting-style et la « règle originale » ont la même spécificité. Pour une application fiable, placez toujours la @starting-style règle at après la « règle originale ».

Applications pratiques

@starting-style excelle dans la création d'effets d'entrée et de transitions. Considérez son utilisation pour fondre le texte lors du chargement de la page ou pour animer des fenêtres contextuelles et des boîtes de dialogue. Voici quelques exemples :

Animation de display: none

Le principal avantage de @starting-style est sa capacité à créer des transitions fluides pour les éléments initialement cachés, en particulier ceux qui transitent depuis display: none. Sans @starting-style, animer cette transition est difficile en raison de l’absence d’un état de départ défini. @starting-style résout ce problème en fournissant cet état initial.

Un élément dialog fournit une illustration claire. Son corps bascule entre display: none et display: block. L'animation n'est généralement pas possible en raison du display changement de propriété, mais @starting-style le rend réalisable.

Fondu et glissement lors du chargement de la page

Dans cet exemple, @starting-style définit l'état "avant" pour les deux éléments. L'effet de fondu définit l'opacité initiale à 0, tandis que l'effet de glissement utilise une translation vers la gauche.

---

Cet article s'est concentré sur les animations d'entrée. Les effets de sortie ne sont pas gérés par @starting-style. Pour les animations de sortie, vous devrez explorer transition-behavior, un sujet pour une autre discussion.

Lisez l'article complet ici. Visitez mon blog ici.

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!