React.js 앱에서 전환 애니메이션 보기-CSS 튜토리얼-php.cn

React.js 앱에서 전환 애니메이션 보기

王林

풀어 주다： 2024-08-23 14:31:15

원래의

1010명이 탐색했습니다.

View Transition Animation in React.js App

어느 날에는 사이트의 목록 애니메이션에서 빠른 제거 항목을 만들고 싶습니다. 이번에는 React 전환 그룹을 건너뛰고 새로운 보기 전환을 시도하여 시간을 절약하세요.

트릭할 수 있는 코드가 거의 없는데 왜 많은 코드를 작성해야 할까요?

Transition API는 Chrome에서만 볼 수 있지만 상관없습니다.

Crux는 document.startViewTransition입니다.

그러나 상태 전, 상태 후에 DOM을 설정해야 하지만 React.js는 허용하지 않습니다.

React.js는 반응적입니다. 동기식이 아닙니다. document.startViewTransition에는 동기가 필요합니다.

Google에 자세히 알아보기:

import { flushSync } from "react-dom";

flushSync(() => setState(...));

로그인 후 복사

내가 쓰는 후크:

import { useState } from "react";
import { flushSync } from "react-dom";

export const useViewTransition =
  typeof document !== "undefined" && "startViewTransition" in document
    ? <T>(newValue: T) => {
        const [value, setValue] = useState<T>(newValue);
        if (value !== newValue) {
          document.startViewTransition(() => {
            flushSync(() => {
              setValue(newValue);
            });
          });
        }
        return value;
      }
    : <T>(value: T) => value;

로그인 후 복사

useQuery를 사용하는 경우

const { data: newMsgs } = useQuery({
  queryKey: ["msgs"],
  queryFn: msgs.all(25)
});

const msgs = useViewTransition(newMsgs);

return (
  <ol>
    {msgs?.map(item => (
      <li 
        key={item.id} 
        style={{
          viewTransitionName: "msg-" + item.id,
          viewTransitionClass: "mymsg",
        }}
      >
        {item.title}
      </li>
    ))}
  </ol>
);

로그인 후 복사

이제 useQuery 업데이트 시 document.startViewTransition을 호출한 다음 setState를 호출하세요.

글로벌 CSS가 필요합니다

global.css를 추가합니다:

@supports (view-transition-name: none) {
  ::view-transition-group(root) {
    animation-duration: 0s;
  }
  ::view-transition-group(.mymsg) {
    animation-duration: 0.4s;
  }
}

로그인 후 복사

Chrome에 전체 페이지를 전환하지 않고 목록 항목만 전환하라고 알려줍니다.

이제 메시지 목록 애니메이션이 작동합니다. 아주 좋아요.

위 내용은 React.js 앱에서 전환 애니메이션 보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!