Transitions
过渡效果有助于使 UI 更具表现力且易于使用。
Material UI 提供了可用于为您的应用程序引入一些基本动画效果的过渡。
Collapse
从子元素的起始边缘展开。如果需要水平折叠，请使用 orientation 属性。collapsedSize 属性可用于设置未展开时的最小宽度/高度。
Fade
从透明到不透明淡入。
Slide
从屏幕边缘滑入。direction 属性控制过渡从屏幕的哪个边缘开始。
Transition 组件的 mountOnEnter 属性阻止子组件在 in 为 true 之前挂载。这防止了相对定位的组件从屏幕外位置滚动到视图中。类似地，unmountOnExit 属性在组件过渡到屏幕外后将其从 DOM 中移除。
相对于容器滑动
Slide 组件还接受 container 属性，该属性是对 DOM 节点的引用。如果设置了此属性，Slide 组件将从该 DOM 节点的边缘滑动。
子组件要求
- 转发样式：为了更好地支持服务器端渲染，Material UI 为某些过渡组件（Fade、Grow、Zoom、Slide）的子组件提供了
style属性。必须将style属性应用于 DOM，动画才能按预期工作。 - 转发 ref：过渡组件要求第一个子元素将其 ref 转发到 DOM 节点。有关 ref 的更多详细信息，请查看 Caveat with refs
- 单个元素：过渡组件仅需要一个子元素（不允许使用 React.Fragment）。
// The `props` object contains a `style` prop.
// You need to provide it to the `div` element as shown here.
const MyComponent = React.forwardRef(function (props, ref) {
return (
<div ref={ref} {...props}>
Fade
</div>
);
});
export default function Main() {
return (
<Fade>
{/* MyComponent must be the only child */}
<MyComponent />
</Fade>
);
}
TransitionGroup
要在组件挂载或卸载时为其添加动画效果，您可以使用来自 react-transition-group 的 TransitionGroup 组件。当组件添加或删除时，in 属性由 TransitionGroup 自动切换。
- 🍏 苹果
- 🍌 香蕉
- 🍍 菠萝
TransitionComponent 属性
一些 Material UI 组件在内部使用这些过渡效果。这些组件接受 TransitionComponent 属性以自定义默认过渡效果。您可以使用上述任何组件或您自己的组件。它应遵循以下条件
- 接受
in属性。这对应于打开/关闭状态。 - 当进入过渡开始时，调用
onEnter回调属性。 - 当退出过渡完成时，调用
onExited回调属性。这两个回调允许在关闭状态且完全过渡时卸载子组件。
有关创建自定义过渡的更多信息，请访问 react-transition-group Transition 文档。您还可以访问某些组件的专用部分
性能 & SEO
即使 in={false}，默认情况下也会挂载过渡组件的内容。此默认行为考虑了服务器端渲染和 SEO。如果您在过渡效果内渲染昂贵的组件树，则最好通过启用 unmountOnExit 属性来更改此默认行为
<Fade in={false} unmountOnExit />
与任何性能优化一样，这并非万能药。请务必先找出瓶颈，然后再尝试这些优化策略。