在 React.js 应用程序中查看过渡动画
Aug 23, 2024 pm 02:31 PM前几天我想为网站创建快速删除列表动画的项目。这次跳过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

热门文章
击败分裂小说需要多长时间?
3 周前
By DDD
仓库:如何复兴队友
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?
3 周前
By 王林
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前
By 尊渡假赌尊渡假赌尊渡假赌

热门文章
击败分裂小说需要多长时间?
3 周前
By DDD
仓库:如何复兴队友
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?
3 周前
By 王林
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前
By 尊渡假赌尊渡假赌尊渡假赌

热门文章标签

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)