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

어느 날에는 사이트의 목록 애니메이션에서 빠른 제거 항목을 만들고 싶습니다. 이번에는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!