过渡

Transition 组件是实用程序，可让您向组件添加动画效果。

简介

MUI Base 提供了更高级别的组件和低级别的 Hook，可以用于在组件进入和退出屏幕时添加动画。

组件

MUI Base 提供了两个组件，涵盖了使用 CSS 过渡 和 动画 的大多数用例。

CSS 过渡

使用 CSS 过渡，您可以平滑地更改 CSS 属性值。CSS Transition 组件通过在元素应该可见和隐藏时添加指定的类名来工作；由您来定义这些类的任何过渡效果。

以下示例定义了 open 和 close 类，并将 CSS Transition 组件设置为相应地应用它们：由于 close 类具有多个具有不同持续时间的过渡效果（transform 过渡效果为 400 毫秒，opacity 和 filter 过渡效果为 200 毫秒），您必须让 transition 组件知道哪个属性需要最长时间才能完成。lastTransitionedPropertyOnExit 正是为此目的而服务。

通常，如果一个元素出现在 DOM 中并且已经有一个带有过渡效果的 CSS 类，则不会触发此过渡效果（因为没有要过渡的状态）。CSS Transition 组件通过在挂载组件时使用 exitClassName，并在短暂的时刻之后，将类名更改为 enterClassName 来解决此问题。这确保了即使在退出时从 DOM 中删除过渡元素，也会应用进入过渡效果。

CSS 动画

CSS 动画比过渡效果提供更大的灵活性。您可以定义多个关键帧，以便更好地控制动画播放。

CSS Animation 组件通过应用 CSS 类（来自 enterClassName 或 exitClassName 属性）来触发动画。

Hooks

如果内置组件不能满足您的需求，或者您想从您的组件触发过渡效果，您可以使用 useTransitionTrigger 和 useTransitionStateManager Hook。在控制过渡效果的组件中使用 useTransitionTrigger Hook——例如，弹出框在内部使用它来请求其内容的出现。

将 useTransitionStateManager 与需要过渡的组件一起使用。CSS Animation 和 CSS Transition 组件在渲染时调用此 Hook。

调用 useTransitionTrigger 返回一个上下文（以及其他属性），useTransitionStateManager 会读取该上下文。

使用第三方库

您可以创建一个自定义适配器来与第三方动画库一起使用。这样的适配器应使用 useTransitionStateManager Hook 并将其结果转换为库可以理解的格式。

请参阅以下示例。

Material UI (React Transition Group)

您可以使用 Material UI 中的任何过渡效果，或使用 React Transition Group 构建的自定义过渡效果，使用以下演示中显示的适配器。

React Spring

React Spring 是另一个流行的动画库，也可以与 MUI Base transitions API 一起使用。