ホームページ > 記事 > ウェブフロントエンド > 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;
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 を呼び出します。
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 サイトの他の関連記事を参照してください。