Rumah  >  Artikel  >  hujung hadapan web  >  Lihat Animasi Peralihan dalam Apl React.js

Lihat Animasi Peralihan dalam Apl React.js

王林
王林asal
2024-08-23 14:31:15955semak imbas

View Transition Animation in React.js App

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn