React.js アプリで遷移アニメーションを表示する

先日、サイトのリストからアイテムを簡単に削除するアニメーションを作成したいと思いました。今回は React Transition Group をスキップし、新しい View Transition を試して時間を節約します。

機能するコードがほとんどないのに、なぜ大量のコードを記述する必要があるのですか。

Transition API Chrome のみを表示しますが、気にする必要はありません。

核心は 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 中国語 Web サイトの他の関連記事を参照してください。