トランジションテーマのアニメーションを表示する

CSS とビューの遷移を使用して、ライト モードからダーク モードに遷移するときにクールな効果を追加します。

twitter の @jhey からコピーしました

[!NOTE]
これは、テーマを更新するための何らかの機能を備えたダークライト モードがすでに設定されていることを前提としています

1. 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. data-style="angled" 属性がルート要素に設定されていることを確認してください SPA React では useEffect フックを使用します

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

SSR では HTML タグに直接設定できます

1. テーマ変更関数を documnet.startViewTransition でラップして、ビューの遷移を開始します。

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

対応する CSS ファイルをインクルードし、正しいデータ スタイル属性を追加することで、より多くのトランジション スタイルを追加できます

      <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>

反応例

このタイプの CSS トリックが好きなら、jhey をフォローすることを検討してください

以上がトランジションテーマのアニメーションを表示するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。