Les transitions CSS s'exécutent lorsqu'une propriété change entre deux états rendus. Ils n'ont jamais couru en entrant, car la première image d'un élément arrive déjà définitive ; Ainsi, chaque animation ouverte sur le Web vivait dans une animation d'images clés ou en JavaScript. at-rules a corrigé la moitié manquante.

dialog {
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.3s, translate 0.3s;
}

dialog[open] {
  @starting-style {
    opacity: 0;
    translate: 0 1rem;
  }
}

Pourquoi cela bat les images clés

  • La première image de l'élément obtient les valeurs de départ ; la propriété de transition s'anime ensuite dans l'état ouvert avec le même assouplissement que vous utilisez déjà.
  • Il compose avec les transitions d'affichage et de popover : les transitions d'affichage permettent à un élément de s'animer à partir de display:none, qui bloquait en dur les transitions.
  • La sortie utilise les règles de transition habituelles, donc l'entrée et la sortie partagent une source de vérité au lieu d'une animation et d'un hack inversé.
  • Enveloppez le tout dans une requête multimédia à mouvement réduit et l'animation est désactivée pour les lecteurs qui se sont désabonnés.

Recette d'adoption

  1. Choisissez d'abord vos popovers et vos boîtes de dialogue : ils ont déjà des états ouverts contrôlés par l'application, la victoire est donc immédiate.
  2. Écrivez les styles restants, puis ajoutez le bloc de départ avec uniquement les propriétés que vous allez transitionner.
  3. Ajoutez un comportement de transition : autorisez-le discret à toute transition d'affichage, sinon l'animation de fermeture s'enclenchera.
  4. Testez le clavier, l'échappement et la réduction des mouvements ; la plate-forme a au plus une lacune de finition, et c'est votre assurance qualité qui doit le nommer.

Entre les styles de dialogue, de popover et de démarrage, l'animation d'entrée est désormais composée de trois déclarations sur une page statique. Le menu de ce site s'ouvre exactement avec une telle transition, et le fait qu'aucun script ne le sache est très gacor de par sa conception.