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