CSS : @starting-style

Publié le : 26 juil. 2024

Introduction Introduction

@starting-style est une règle CSS qui permet de définir un style de départ pour un élément HTML.

Cela est surtout utile pour les éléments qui sont cachés par défaut et qui doivent apparaitre avec une transition car celles-ci ne sont pas déclenchées sur la mise à jour initiale du style ou sur des changements de style à partir d’un display:none;

Attention

A l’heure actuelle, @starting-style n’est pas encore supporté par tous les navigateurs. N’hésitez pas à consulter la compatibilité sur Caniuse.

Dans cet exemple, on parvient à animer sur les propriétés background-color et opacity mais l’élément est toujours en état affiché car on n’a pas appliqué de display:none;.

Si on ajoutait un basculement de display:none; à display:block;, nous perdrions l’animation.

Syntaxe Syntaxe

@starting-style @starting-style

Dans cette démo, la règle @starting-style, permet d’appliquer une couleur de départ dès le chargement de la page.

L’idée de cette démo est de montrer à quel moment le @starting-style intervient.

.box {
  transition: background-color 10s;
  background: blue;
  @starting-style {
    background-color: red;
  }
}

allow-discrete allow-discrete

Dans cette démo, on utilise également la règle @starting-style pour animer l’apparition et la disparition d’un élément HTML avec un basculement de display:none; à display:block; Pour régler le problème de la perte de l’animation, on a ajouté un display 0.5s allow-discrete qui permet d’appliquer une transition sur le display.

Pour le faire sur toutes les propriétés, on peut utiliser : transition-behavior: allow-discrete;.

.box {
  opacity: 0;
  display: none;
  /* on applique une transition douce sur le display */
  transition: opacity 1s, display 1s allow-discrete;
}

/* Active state when :checked */
:checked + .box {
  opacity: 1;
  display: block;
}

/* Pour les éléments qui ne sont pas initialement rendus dans le DOM.
  Dans ce cas, nous avons un élément `display: none`, nous devons donc regarder
  augmenter l'état initial pour calculer un style avant changement */
@starting-style {
  /* Avant que l'état ne change  */
  :checked + .box {
    opacity: 0;
    /*   pas de besoin de redéfinir le display: none ici`*/
  }
}

Les Popovers sont des éléments qui permettent d’afficher des informations contextuelles. Ils sont souvent utilisés pour afficher des informations supplémentaires. Ces apparitions se basent sur le basculement de display:none; à display:block; et peuvent être animées avec @starting-style.

Pour animer un popover, on va reggarder son état d’ouverture à l’aide la pseudo classe :popover-open.

[popover] {
  /* Final state of the exit animation */
  opacity: 0;
  transform: translateX(100%);

  /* transitions */
  transition: opacity 0.7s, transform 0.7s, display 0.7s allow-discrete;

  /* Open State */
  &:popover-open {

    /* End open State */
    opacity: 1;
    transform: translateX(0);

    /* Start pen State */
    @starting-style {
      opacity: 0;
      transform: translateX(100%);
    }
  }
}

Dialog Dialog

Autre exemple avec les <dialog>, on peut animer l’apparition et la disparition de la boîte de dialogue avec @starting-style.


dialog {
  /* Final state of the exit animation */
  opacity: 0;
  transform: translateY(100%);

  /* transitions */
  transition: opacity 0.7s, transform 0.7s, display 0.7s allow-discrete;

  /* Open State */
  &[open] {
    
    /* End open State */
    opacity: 1;
    transform: translateY(0);

    /* Start open State */
    @starting-style {
      opacity: 0;
      transform: translateY(100%);
    }
  }
}

Backdrop et overlay Backdrop et overlay

Liens Liens

Conclusion Conclusion

Nous avons vu 4 nouvelles fonctionnalités dans ce même article :

@starting-style : pour définir un style de départ pour un élément HTML
transition-behavior: allow-discrete; : pour appliquer une transition sur les propriétés discrètes telles que display ou le content-visibility
::backdrop : pour cibler l’arrière-plan de la boîte de dialogue
overlay : pour animer l’overlay de la boîte de dialogue

Ces fonctionnalités vont être très intéressante pour améliorer l’expérience utilisateur en terme d’animation. Elles remplacent les anciennes méthodes qui étaient souvent basées sur du Javascript, ce qui alourdissait le code et ralentissait le chargement de la page.