في يوم آخر، أريد إنشاء عناصر إزالة سريعة من قائمة الرسوم المتحركة للموقع. هذه المرة، قم بتخطي React Transition Group، وجرّب عرض انتقالي جديد، ووفّر الوقت.

لماذا تكتب الكثير من الأكواد بينما القليل من الأكواد تؤدي الخدعة.

عرض Transition API لمتصفح Chrome فقط، ولكن لا يهمني.

الأصل هو document.startViewTransition.

ولكن يلزم إنشاء 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" && "startViewTransition" in document
    ? (newValue: T) => {
        const [value, setValue] = useState(newValue);
        if (value !== newValue) {
          document.startViewTransition(() => {
            flushSync(() => {
              setValue(newValue);
            });
          });
        }
        return value;
      }
    : (value: T) => value;

إذا استخدم useQuery

const { data: newMsgs } = useQuery({
  queryKey: ["msgs"],
  queryFn: msgs.all(25)
});

const msgs = useViewTransition(newMsgs);

return (
  

    {msgs?.map(item => (
      

        {item.title}
      
    ))}
  
);

الآن عند تحديث useQuery، قم بتوصيل 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: لا تنقل الصفحة بأكملها، بل تنقل عناصر القائمة فقط.

الآن تعمل الرسوم المتحركة لقائمة الرسائل. لطيف جدًا.