unstable_addTransitionType

startTransition(() => {
  unstable_addTransitionType('my-transition-type');
  setState(newState);
});

• Referensi
  • addTransitionType
• Penggunaan
  • Menambahkan penyebab transisi
  • Menyesuaikan animasi menggunakan tipe transisi tampilan browser
  • Menyesuaikan animasi menggunakan Kelas View Transition
  • Menyesuaikan animasi menggunakan event ViewTransition
• Troubleshooting
  • TODO

Referensi

addTransitionType

Parameter

• type: Tipe transisi yang akan ditambahkan. Ini dapat berupa string apa pun.

Kembalian

addTransitionType tidak mengembalikan apa pun.

Caveats

• Jika beberapa transisi digabungkan, semua Tipe Transisi akan dikumpulkan. Anda juga dapat menambahkan lebih dari satu tipe ke dalam sebuah Transisi.
• Tipe Transisi diatur ulang setiap kali commit. Ini berarti fallback <Suspense> akan mengasosiasikan tipe setelah startTransition, namun menampilkan konten tidak demikian.

Penggunaan

Menambahkan penyebab transisi

Panggil addTransitionType di dalam startTransition untuk menunjukkan penyebab dari suatu transisi:

import { startTransition, unstable_addTransitionType } from 'react';

function Submit({action) {
  function handleClick() {
    startTransition(() => {
      unstable_addTransitionType('submit-click');
      action();
    });
  }

  return <button onClick={handleClick}>Click me</button>;
}

Saat Anda memanggil addTransitionType di dalam cakupan startTransition, React akan mengasosiasikan submit-click sebagai salah satu penyebab Transisi tersebut.

Saat ini, Tipe Transisi dapat digunakan untuk menyesuaikan animasi yang berbeda berdasarkan apa yang menyebabkan Transisi tersebut. Anda memiliki tiga cara berbeda yang dapat dipilih untuk menggunakannya:

• Menyesuaikan animasi menggunakan tipe transisi tampilan browser
• Menyesuaikan animasi menggunakan Kelas View Transition
• Menyesuaikan animasi menggunakan event ViewTransition

Di masa mendatang, kami berencana untuk mendukung lebih banyak kasus penggunaan untuk menggunakan penyebab transisi.

Menyesuaikan animasi menggunakan tipe transisi tampilan browser

Ketika ViewTransition aktif dari sebuah transisi, React menambahkan semua Tipe Transisi sebagai tipe transisi tampilan browser ke elemen tersebut.

Ini memungkinkan Anda menyesuaikan animasi berbeda berdasarkan cakupan CSS:

function Component() {
  return (
    <ViewTransition>
      <div>Hello</div>
    </ViewTransition>
  );
}

startTransition(() => {
  unstable_addTransitionType('my-transition-type');
  setShow(true);
});

:root:active-view-transition-type(my-transition-type) {
  &::view-transition-...(...) {
    ...
  }
}

Menyesuaikan animasi menggunakan Kelas View Transition

Anda dapat menyesuaikan animasi untuk ViewTransition yang diaktifkan berdasarkan tipe dengan meneruskan objek ke Kelas View Transition:

function Component() {
  return (
    <ViewTransition enter={{
      'my-transition-type': 'my-transition-class',
    }}>
      <div>Hello</div>
    </ViewTransition>
  );
}

// ...
startTransition(() => {
  unstable_addTransitionType('my-transition-type');
  setState(newState);
});

Jika beberapa tipe cocok, maka mereka akan digabungkan. Jika tidak ada tipe yang cocok, maka entri khusus “default” yang digunakan. Jika ada tipe yang memiliki nilai “none”, maka itu yang akan menang dan ViewTransition dinonaktifkan (tidak diberikan nama).

Ini dapat dikombinasikan dengan prop enter/exit/update/layout/share untuk mencocokkan berdasarkan jenis pemicu dan Tipe Transisi.

<ViewTransition enter={{
  'navigation-back': 'enter-right',
  'navigation-forward': 'enter-left',
}}
exit={{
  'navigation-back': 'exit-right',
  'navigation-forward': 'exit-left',
}}>

Menyesuaikan animasi menggunakan event ViewTransition

Anda dapat secara imperatif menyesuaikan animasi untuk ViewTransition yang diaktifkan berdasarkan tipe menggunakan event View Transition:

<ViewTransition onUpdate={(inst, types) => {
  if (types.includes('navigation-back')) {
    ...
  } else if (types.includes('navigation-forward')) {
    ...
  } else {
    ...
  }
}}>

Ini memungkinkan Anda untuk memilih Animasi imperatif yang berbeda berdasarkan penyebabnya.

Troubleshooting

TODO