Lihat Animasi Peralihan dalam Apl React.js

Hari lain saya mahu mencipta item alih keluar cepat daripada animasi senarai untuk tapak. Kali ini langkau React Transition Group, cuba View Transition baharu, jimat masa.

Mengapa menulis kod lot apabila beberapa kod menipu.

Lihat Chrome Transition API sahaja, tetapi saya tidak kisah.

Crux ialah document.startViewTransition.

Tetapi perlu menubuhkan DOM sebelum keadaan, selepas keadaan, tetapi React.js tidak membenarkan.

React.js reaktif. Tidak segerak. document.startViewTransition perlu segerak.

Tanya Google belajar:

import { flushSync } from "react-dom";

flushSync(() => setState(...));

Saya tulis cangkuk:

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;

Jika gunakan 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>
);

Sekarang apabila kemas kini useQuery, cangkuk panggilan document.startViewTransition kemudian setState.

Perlu CSS global

Saya tambah global.css:

@supports (view-transition-name: none) {
  ::view-transition-group(root) {
    animation-duration: 0s;
  }
  ::view-transition-group(.mymsg) {
    animation-duration: 0.4s;
  }
}

Ini memberitahu Chrome: jangan alihkan seluruh halaman, hanya peralihan item senarai.

Sekarang animasi senarai mesej berfungsi. Sangat bagus.

Atas ialah kandungan terperinci Lihat Animasi Peralihan dalam Apl React.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!