ホームページ  >  記事  >  ウェブフロントエンド  >  React.js アプリで遷移アニメーションを表示する

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

王林
王林オリジナル
2024-08-23 14:31:15955ブラウズ

View Transition Animation in React.js App

先日、サイトのリストからアイテムを簡単に削除するアニメーションを作成したいと思いました。今回は 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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。