전환 테마 애니메이션 보기

CSS 및 보기 전환을 사용하여 밝은 모드에서 어두운 모드로 전환할 때 멋진 효과 추가

트위터 @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 반응에서는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!