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

トリックを実行できるコードがほとんどないのに、なぜ大量のコードを記述するのか。

View 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
    ? (newValue: T) => {
        const [value, setValue] = useState(newValue);
        if (value !== newValue) {
          document.startViewTransition(() => {
            flushSync(() => {
              setValue(newValue);
            });
          });
        }
        return value;
      }
    : (value: T) => value;

useQueryを使用する場合

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

const msgs = useViewTransition(newMsgs);

return (
  

    {msgs?.map(item => (
      

        {item.title}
      
    ))}
  
);

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 に、ページ全体を遷移させるのではなく、リスト項目のみを遷移させるように指示します。

メッセージリストアニメーション作品になりました。非常に素晴らしい。