我正在使用 material-ui v1 beta 的 Collapse 和 Drawer 在移动网站上创建导航。导航有很多nested lists。
当我单击展开/折叠折叠时，在折叠开始动画之前会有明显的延迟。 Drawer 也会出现同样的问题。
Collapse 和 Drawer 都使用 Transition 来制作动画。转换由react-transition-group提供。
为了提高响应能力，我计划使用没有过渡的折叠和抽屉（我不介意没有动画）。有没有办法在没有过渡的情况下使用折叠和抽屉？
附：我检查了 Collapse 和 Drawer 的文档，没有找到禁用转换的道具或标志。
【问题讨论】：
标签： material-ui react-transition-group
Drawer 暴露了一个 transitionDuration 属性：
过渡的持续时间，以毫秒为单位。您可以为所有转换指定一个超时，或单独为一个对象指定一个超时。
将此设置为零可消除过渡效果：
<Drawer transitionDuration={0} ...>
Collapse 提供了一个具有类似描述的 timeout 属性：
过渡的持续时间，以毫秒为单位。您可以为所有转换指定一个超时，或者单独为一个对象指定一个超时。 设置为“自动”以根据高度自动计算过渡时间。
同样，将其设置为零会消除效果。这个codesandbox是对material-ui嵌套列表demo的修改。
请记住，Collapse 只是使用Grow 转换的元素的包装器。如果您不希望动画发生，您可以根据状态有条件地渲染项目。有关示例，请参阅此 other codesandbox。
【讨论】：
timeout 消除了Collapse 的Transition 效果，但不会提高其性能。我在问题中提到的问题（“在折叠开始动画之前有明显的延迟”）仍然存在。
auto 超时。
我遇到了类似的问题，即使用 <Collapse /> 面板渲染 material-ui <Card /> 的虚拟化列表以获得手风琴效果。
问题在于<Collapse /> 转换行为。即使将其timeout 属性设置为0 以希望没有延迟，它仍然会导致延迟，即使在componentDidMount 生命周期之后也会导致它完成渲染。 <Drawer /> transitionDuration 道具也是如此。
解决方案
只需完全移除 <Collapse /> 和 <Drawer /> 组件即可。只需使用状态来切换下划线子组件（比如说<List />）样式显示。
但如果真的要包含动画效果，那就用react-virtuoso而不是react-window
【讨论】：