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

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

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

View Transition API Chrome のみですが、気にしません。

核心は document.startViewTransition です

ただし、状態の前、状態の後に DOM を確立する必要がありますが、React.js では許可されていません。

React.js リアクティブ。同期ではありません。 document.startViewTransition は同期する必要があります。

Google に聞いてみましょう:

リーリー

私がフックを書きます:

リーリー

useQueryを使用する場合

リーリー

useQuery の更新時に、document.startViewTransition をフックして setState.

を呼び出します。

グローバルCSSが必要

global.cssを追加します:

リーリー

これは Chrome に、ページ全体を遷移させず、リスト項目のみを遷移させるように指示します。

メッセージリストアニメーション作品になりました。とても素敵です

以上がReact.js アプリで遷移アニメーションを表示するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。