Question

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

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

折叠和抽屉都使用过渡动画。转换由react-transition-group提供。

为了提高响应能力，我打算在没有过渡的情况下使用折叠和抽屉（我不介意没有动画）。有没有办法在没有过渡的情况下使用折叠和抽屉？

P.S。我已经查看了折叠和抽屉的文档，但没有找到道具或旗帜来禁用过渡。

Answer 1

Drawer公开transitionDuration道具：

转换的持续时间，以毫秒为单位。您可以为所有转换指定单个超时，也可以为对象单独指定。

将此设置为零可消除转换的影响：

<Drawer transitionDuration={0} ...>

Collapse提供了一个类似描述的timeout道具：

转换的持续时间，以毫秒为单位。您可以为所有转换指定单个超时，或者为对象单独指定。设置为“自动”以根据高度自动计算转换时间。

同样，将此设置为零可消除效果。这个codesandbox是材料-ui嵌套列表演示的修改。

请注意，Collapse仅仅是使用Grow转换的元素的包装器。如果您不希望动画发生，则可以根据状态有条件地呈现项目。有关示例，请参阅此other codesandbox。

Answer 2

我遇到了类似的问题，即使用<Card />面板来呈现Material-ui <Collapse />的虚拟化列表，以实现手风琴效果。

问题出在<Collapse />过渡行为上。即使有人将其timeout属性设置为0也不希望有延迟，它仍然会引起延迟，甚至在componentDidMount生命周期后也会导致延迟完成渲染。 <Drawer /> transitionDuration道具也是如此。

解决方案

只需完全删除<Collapse />和<Drawer />组件。只需使用状态来切换带下划线的子组件（例如说<List />）样式显示。

但是，如果真的希望包含动画效果，请使用react-virtuoso代替react-window