在 Reactjs 应用程序中查看过渡动画

ID:15451 / 打印

在 reactjs 应用程序中查看过渡动画

有一天,我想为网站创建快速从列表动画中删除项目的功能。这次跳过react transition group,尝试新的view transition,节省时间。

当很少有代码能做到这一点时,为什么要编写大量代码。

view transition api 仅适用于 chrome,但我不在乎。

关键是 document.startviewtransition.

但是需要在state之前、state之后建立dom,但react.js不允许。

react.js 反应式。不同步。 document.startviewtransition 需要同步。

问谷歌学习:

import { flushsync } from "react-dom";  flushsync(() => setstate(...)); 

我写钩子:

import { usestate } from "react"; import { flushsync } from "react-dom";  export const useviewtransition =   typeof document !== "undefined" &amp;&amp; "startviewtransition" in document     ? <t>(newvalue: t) =&gt; {         const [value, setvalue] = usestate<t>(newvalue);         if (value !== newvalue) {           document.startviewtransition(() =&gt; {             flushsync(() =&gt; {               setvalue(newvalue);             });           });         }         return value;       }     : <t>(value: t) =&gt; value; </t></t></t>

如果使用usequery

const { data: newmsgs } = usequery({   querykey: ["msgs"],   queryfn: msgs.all(25) });  const msgs = useviewtransition(newmsgs);  return (   <ol>     {msgs?.map(item =&gt; (       <li key="{item.id}" style="{{" viewtransitionname: item.id viewtransitionclass:>         {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:不要转换整个页面,只转换列表项。

现在消息列表动画工作了。非常好。

上一篇: 姜戈顺风
下一篇: 使无头组件易于设计

作者:admin @ 24资源网   2024-10-18

本站所有软件、源码、文章均有网友提供,如有侵权联系308410122@qq.com

与本文相关文章

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。