addTransitionType

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

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

参考

🌐 Reference

addTransitionType

参数

🌐 Parameters

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

返回

🌐 Returns

addTransitionType 不返回任何值。

注意事项

🌐 Caveats

• 如果组合多个过渡，将收集所有过渡类型。你也可以向一个过渡添加多种类型。
• 每次提交后，转换类型都会重置。这意味着 <Suspense> 回退将在 startTransition 之后关联类型，但显示内容则不会。

用法

🌐 Usage

添加过渡效果

🌐 Adding the cause of a transition

在 startTransition 内调用 addTransitionType 以指示转换的原因：

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

import { startTransition, addTransitionType } from 'react';

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

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

当你在 startTransition的作用域内调用 addTransitionType 时，React会将 submit-click 关联为导致该过渡的原因之一。

当前，过渡类型可以用来根据导致过渡的原因自定义不同的动画。你有三种不同的方式来选择如何使用它们：

🌐 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:

• 使用浏览器视图转换类型自定义动画
• 使用 View Transition 类自定义动画
• 使用 ViewTransition 事件自定义动画

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

🌐 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(() => {
  addTransitionType('my-transition-type');
  setShow(true);
});

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

使用 View Transition 类自定义动画

🌐 Customize animations using View Transition Class

你可以通过向视图过渡类传递一个对象，根据类型为激活的 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(() => {
  addTransitionType('my-transition-type');
  setState(newState);
});

如果多个类型匹配，则将它们组合在一起。如果没有类型匹配，则使用特殊的“默认”条目。如果任何类型的值为“无”，则该值优先，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.