Sehen Sie sich Animationen für Übergangsthemen an

Fügen Sie einen coolen Effekt hinzu, wenn Sie mithilfe von CSS und Ansichtsübergängen vom hellen in den dunklen Modus wechseln

kopiert von @jhey auf Twitter

[!NOTE]
Dies setzt voraus, dass Sie Ihren Dunkellichtmodus bereits mit einer Funktion zum Aktualisieren Ihres Themas eingerichtet haben

1. CSS hinzufügen

  /* 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. Stellen Sie sicher, dass das Attribut data-style="angled" für das Stammelement festgelegt ist In SPA React verwenden wir einen useEffect-Hook

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

in SSR kann es direkt im HTML-Tag eingestellt werden

1. Schließen Sie Ihre Theme-Änderungsfunktion in eine documnet.startViewTransition ein, um den Ansichtsübergang zu starten

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

Weitere Übergangsstile können hinzugefügt werden, indem die entsprechende CSS-Datei eingebunden und das richtige Datenstilattribut hinzugefügt wird

      <select
      className="select select-bordered select-sm max-w-xs"
        onChange={(e) =>
          (document.documentElement.dataset.style = e.target.value)
        }
      >
        <option value="default">Default</option>
        <option value="vertical">Vertical</option>
        <option value="wipe">Wipe</option>
        <option value="angled">Angled</option>
        <option value="flip">Flip</option>
        <option value="slides">Slides</option>
      </select>

Reaktionsbeispiel

Wenn Ihnen diese Art von CSS-Tricks gefällt, sollten Sie jhey folgen

Das obige ist der detaillierte Inhalt vonSehen Sie sich Animationen für Übergangsthemen an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!