Lihat animasi tema peralihan

Tambahkan kesan sejuk apabila menukar daripada mod terang ke gelap menggunakan css dan peralihan paparan

disalin daripada @jhey di twitter

[!NOTA]
Ini mengandaikan anda sudah mempunyai persediaan mod cahaya gelap anda dengan beberapa jenis fungsi untuk mengemas kini tema anda

1. Tambah 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. pastikan atribut data-style="angled" ditetapkan pada elemen akar dalam tindak balas SPA kami menggunakan cangkuk useEffect

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

dalam SSR ia boleh ditetapkan terus dalam tag html

1. balut fungsi perubahan tema anda dalam documnet.startViewTransition untuk memulakan peralihan paparan

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

lebih banyak gaya peralihan boleh ditambah dengan memasukkan fail css yang sepadan dan menambah atribut gaya data yang betul

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

contoh tindak balas

Jika anda suka helah css jenis ini pertimbangkan untuk mengikuti jhey

Atas ialah kandungan terperinci Lihat animasi tema peralihan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!