首頁  >  文章  >  web前端  >  在 React.js 應用程式中查看過渡動畫

在 React.js 應用程式中查看過渡動畫

王林
王林原創
2024-08-23 14:31:15950瀏覽

View Transition Animation in React.js App

前幾天我想為網站建立快速刪除清單動畫的項目。這次跳過React Transition Group,試試新的View Transition,節省時間。

當很少有程式碼能做到這一點時,為什麼要寫大量程式碼。

View Transition API 僅適用於 Chrome,但我不在乎。

關鍵是document.startViewTransition。

但需要在state之前、state之後建立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更新時,hook呼叫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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn