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 파일을 포함하고 올바른 데이터 스타일 속성을 추가하면 더 많은 전환 스타일을 추가할 수 있습니다.

      
          (document.documentElement.dataset.style = e.target.value)
        }
      >
        DefaultVerticalWipeAngledFlipSlides

반응 예시

이런 유형의 CSS 트릭을 좋아한다면 jhey를 팔로우하는 것을 고려해 보세요.