addTransitionType¶

addTransitionType позволяет указать причину перехода.

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

Описание¶

`addTransitionType`¶

Параметры¶

type: Тип перехода, который нужно добавить. Это может быть любая строка.

Возвращаемое значение¶

addTransitionType ничего не возвращает.

Предупреждения¶

Если несколько переходов объединяются, собираются все типы переходов. К переходу также можно добавить больше одного типа.
Типы переходов сбрасываются после каждого коммита. Это значит, что фолбэк <Suspense> свяжет типы после startTransition, но раскрытие содержимого — нет.

Использование¶

Добавление причины перехода¶

Вызовите addTransitionType внутри startTransition, чтобы указать причину перехода:

import { startTransition, addTransitionType } from 'react';

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

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

Когда вы вызываете addTransitionType в области видимости startTransition, React свяжет submit-click как одну из причин перехода.

Сейчас типы переходов можно использовать, чтобы настраивать разные анимации в зависимости от того, что вызвало переход. Есть три способа их использовать:

Настройка анимаций с помощью типов перехода представления в браузере
Настройка анимаций с помощью класса View Transition
Настройка анимаций с помощью событий ViewTransition

В будущем мы планируем поддержать больше сценариев использования причины перехода.

Настройка анимаций с помощью типов перехода представления в браузере¶

Когда ViewTransition активируется из перехода, React добавляет все типы переходов как браузерные типы перехода представления к элементу.

Это позволяет настраивать разные анимации на основе областей CSS:

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

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

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

Настройка анимаций с помощью класса `View Transition`¶

Вы можете настраивать анимации активированного ViewTransition в зависимости от типа, передав объект в класс View Transition:

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

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

Если совпадает несколько типов, они объединяются. Если ни один тип не совпал, вместо этого используется специальная запись "default". Если у какого-либо типа значение "none", оно побеждает, и ViewTransition отключается (имя не назначается).

Их можно сочетать с пропсами enter/exit/update/layout/share, чтобы сопоставлять по виду триггера и типу перехода.

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

Настройка анимаций с помощью событий `ViewTransition`¶

Вы можете императивно настраивать анимации активированного ViewTransition в зависимости от типа с помощью событий View Transition:

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

Это позволяет выбирать разные императивные анимации в зависимости от причины.

Источник — https://react.dev/reference/react/addTransitionType

addTransitionType¶

Описание¶