unstable_addTransitionType

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

• 参考
  • addTransitionType
• 用法
  • 添加过渡效果
  • 使用浏览器视图过渡类型自定义动画
  • 使用 View Transition 类自定义动画
  • 使用 ViewTransition 自定义动画事件
• 故障排除
  • TODO

参考

¥Reference

addTransitionType

参数

¥Parameters

• type：要添加的过渡类型。这可以是任何字符串。

  ¥type: The type of transition to add. This can be any string.

返回

¥Returns

startTransition 不返回任何东西。

¥startTransition does not return anything.

注意事项

¥Caveats

• 如果组合了多个 Transition，则会收集所有 Transition 类型。你还可以为 Transition 添加多种类型。

  ¥If multiple transitions are combined, all Transition Types are collected. You can also add more than one type to a Transition.

• 每次提交后，转换类型都会重置。这意味着 <Suspense> 的回退将关联 startTransition 之后的类型，但显示内容则不会。

  ¥Transition Types are reset after each commit. This means a <Suspense> fallback will associate the types after a startTransition, but revealing the content does not.

用法

¥Usage

添加过渡效果

¥Adding the cause of a transition

在 startTransition 中调用 addTransitionType 来指示转换的原因：

¥Call addTransitionType inside of startTransition to indicate the cause of a transition:

import { startTransition, unstable_addTransitionType } from 'react';

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

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

当你在 startTransition 的范围内调用 addTransitionType 时，React 会将 submit-click 关联为 Transition 的原因之一。

¥When you call addTransitionType inside the scope of startTransition, React will associate submit-click as one of the causes for the Transition.

目前，过渡类型可用于根据导致过渡的原因自定义不同的动画。你有三种不同的使用方法：

¥Currently, Transition Types can be used to customize different animations based on what caused the Transition. You have three different ways to choose from for how to use them:

• 使用浏览器视图过渡类型自定义动画

  ¥Customize animations using browser view transition types

• 使用 View Transition 类自定义动画

  ¥Customize animations using View Transition Class

• 使用 ViewTransition 自定义动画事件

  ¥Customize animations using ViewTransition events

未来，我们计划支持更多使用转换原因的用例。

¥In the future, we plan to support more use cases for using the cause of a transition.

使用浏览器视图过渡类型自定义动画

¥Customize animations using browser view transition types

当 ViewTransition 从过渡中激活时，React 会将所有过渡类型作为浏览器 视图过渡类型 添加到元素中。

¥When a ViewTransition activates from a transition, React adds all the Transition Types as browser view transition types to the element.

这允许你基于 CSS 范围自定义不同的动画：

¥This allows you to customize different animations based on CSS scopes:

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-...(...) {
    ...
  }
}

使用 View Transition 类自定义动画

¥Customize animations using View Transition Class

你可以通过将对象传递给 View Transition 类，根据类型自定义已激活 ViewTransition 的动画：

¥You can customize animations for an activated ViewTransition based on type by passing an object to the View Transition Class:

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

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

如果多个类型匹配，则将它们连接在一起。如果没有匹配的类型，则使用特殊的 “默认” 条目。如果任何类型的值为 “none”，则该类型优先，并且 ViewTransition 将被禁用（未分配名称）。

¥If multiple types match, then they’re joined together. If no types match then the special “default” entry is used instead. If any type has the value “none” then that wins and the ViewTransition is disabled (not assigned a name).

这些回调可以与 enter/exit/update/layout/share 属性结合使用，以根据触发器类型和过渡类型进行匹配。

¥These can be combined with enter/exit/update/layout/share props to match based on kind of trigger and Transition Type.

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

使用 ViewTransition 自定义动画事件

¥Customize animations using ViewTransition events

你可以使用视图过渡事件，根据类型命令式地自定义已激活 ViewTransition 的动画：

¥You can imperatively customize animations for an activated ViewTransition based on type using View Transition events:

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

这允许你根据原因选择不同的命令式动画。

¥This allows you to pick different imperative Animations based on the cause.

故障排除

¥Troubleshooting

TODO