Ajoutez un effet sympa lors du passage du mode clair au mode sombre à l'aide de CSS et de transitions d'affichage

copié de @jhey sur Twitter

[!NOTER]
Cela suppose que vous avez déjà configuré votre mode lumière sombre avec une sorte de fonction pour mettre à jour votre thème

1. Ajouter le CSS

  /* Angled */
  [data-style='angled']::view-transition-old(root) {
    animation: none;
    z-index: -1;
  }

  [data-style='angled']::view-transition-new(root) {
    animation: unclip 1s;
    clip-path: polygon(-100vmax 100%, 100% 100%, 100% -100vmax);
  }

  @keyframes unclip {
    0% {
      clip-path: polygon(100% 100%, 100% 100%, 100% 100%);
    }
  }

1. assurez-vous que l'attribut data-style="angled" est défini sur l'élément racine dans SPA React, nous utilisons un hook useEffect

  useEffect(() => {
    // set the data-style attribute
    document.documentElement.dataset.style = "angled";
  }, []);

en SSR, il peut être défini directement dans la balise html

1. enveloppez votre fonction de changement de thème dans un document documnet.startViewTransition pour démarrer la transition de vue

  function transitionColors() {
    if (typeof window !== "undefined") {
      document.startViewTransition(() => {
        const newTheme = theme  === "light" ? "dark" : "light";
        document.documentElement.dataset.theme = newTheme;
        updateTheme(newTheme);
      });
    }
  }

d'autres styles de transition peuvent être ajoutés en incluant le fichier CSS correspondant et en ajoutant l'attribut de style de données correct

      
          (document.documentElement.dataset.style = e.target.value)
        }
      >
        DefaultVerticalWipeAngledFlipSlides

exemple de réaction

Si vous aimez ce type d'astuces CSS, pensez à suivre jhey