View transition theme animations

Add cool effect when trnsitionning from light to dark mode using css and view transitions

copied from @jhey on twitter

[!NOTE]
This assumes you've already have your dark light mode setup with some sort of function to update your theme

1. Add the 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. ensure data-style="angled" attribute is set on the root element in SPA react we use a useEffect hook

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

in SSR it can be set directly in the html tag

1. wrap your theme change function in a documnet.startViewTransition to start the view transition

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

more transition styles can be added by including the corresponding css file and adding the correct data-style attribute

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

react example

If you like this type of css tricks consider following jhey

The above is the detailed content of View transition theme animations. For more information, please follow other related articles on the PHP Chinese website!