前幾天我想為網站建立快速刪除清單動畫的項目。這次跳過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;
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。
我加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中文網其他相關文章!