material-ui - 有没有办法在没有过渡的情况下使用 Material-UI Collapse 和 Drawer？

Question

我正在使用来自 material-ui v1 beta 的折叠和抽屉在移动网站上创建导航。导航有很多nested lists .

当我单击展开/折叠 Collapse 时，在 Collapse 开始动画之前会有明显的延迟。同样的问题也发生在抽屉上。

Collapse 和 Drawer 都使用 Transition 来制作动画。过渡由 react-transition-group 提供.

为了提高响应能力，我计划使用 Collapse 和 Drawer without Transition(我不介意没有动画)。有没有办法在没有过渡的情况下使用折叠和抽屉？

附言我检查了 Collapse 和 Drawer 的文档，但没有找到禁用 Transition 的 Prop 或标志。

Answer 1

Drawer暴露一个 transitionDuration支柱:

The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.

将此设置为零可消除过渡的影响:

<Drawer transitionDuration={0} ...>

Collapse提供 timeout具有类似描述的 Prop :

The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. Set to 'auto' to automatically calculate transition time based on height.

同样，将其设置为零可消除该影响。此 codesandbox是对 material-ui Nested List 演示的修改。

请记住， Collapse只是使用 Grow 的元素的包装器过渡。如果您不希望出现动画，您可以根据状态有条件地渲染项目。看到这个 other codesandbox举个例子。