使用 CSS 和視圖轉換從淺色模式轉換為深色模式時添加酷炫效果

複製自 Twitter 上的@jhey

[！筆記]
這假設您已經設定了暗光模式，並具有某種功能來更新您的主題

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 檔案並添加正確的 data-style 屬性來新增更多過渡樣式

      
          (document.documentElement.dataset.style = e.target.value)
        }
      >
        Default
        Vertical
        Wipe
        Angled
        Flip
        Slides
      

反應範例

如果你喜歡這種類型的 css 技巧，請考慮遵循 jhey