知海

addTransitionType()

ReactAPI 参考：React 核心

title: addTransitionType
version: canary

addTransitionType API 目前仅在 React 的 Canary 和 Experimental 频道中可用。

在此详细了解 React 的发布频道。

addTransitionType 允许你指定过渡的原因。

js 复制代码 
startTransition(() => {
  addTransitionType('my-transition-type');
  setState(newState);
});

参考

addTransitionType

参数

  • type: 要添加的过渡类型。可以是任意字符串。

返回值

addTransitionType 不返回任何值。

注意事项

  • 如果多个过渡被组合在一起，所有过渡类型都会被收集。你也可以为一个过渡添加多个类型。
  • 过渡类型在每次提交（commit）后重置。这意味着 <Suspense> 回退（fallback）会在 startTransition 之后关联这些类型，但在显示内容时不会关联。

用法

添加过渡的原因

在 startTransition 内部调用 addTransitionType 来指示过渡的原因：

[[1, 6, "addTransitionType"], [2, 5, "startTransition", [3, 6, "'submit-click'"]]] 复制代码 
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 关联为该过渡的原因之一。

目前，过渡类型可用于根据触发过渡的原因来定制不同的动画。你有以下三种使用方式可供选择：

未来，我们计划支持更多基于过渡原因的使用场景。

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

当一个 ViewTransition 由某个过渡激活时，React 会将所有过渡类型作为浏览器的视图过渡类型添加到该元素上。

这允许你基于 CSS 作用域定制不同的动画：

js 复制代码 
function Component() {
  return (
    <ViewTransition>
      <div>Hello</div>
    </ViewTransition>
  );
}

startTransition(() => {
  addTransitionType('my-transition-type');
  setShow(true);
});
css 复制代码 
:root:active-view-transition-type(my-transition-type) {
  &::view-transition-...(...) {
    ...
  }
}

使用 View Transition 类定制动画

你可以通过向 View Transition 类传递一个对象，根据类型为已激活的 ViewTransition 定制动画：

js 复制代码 
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 props 组合使用，以根据触发类型和过渡类型进行匹配。

js 复制代码 
<ViewTransition enter={{
  'navigation-back': 'enter-right',
  'navigation-forward': 'enter-left',
}}
exit={{
  'navigation-back': 'exit-right',
  'navigation-forward': 'exit-left',
}}>

使用 ViewTransition 事件定制动画

你可以使用 View Transition 事件，根据类型以命令式方式为已激活的 ViewTransition 定制动画：

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

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

帮助我们改进文档

发现翻译问题或内容错误？请告诉我们。