4

我正在使用material-uiv1 beta中的 Collapse 和 Drawer在移动网站上创建导航。导航有许多嵌套列表。

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

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

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

PS 我检查了 Collapse 和 Drawer 的文档，没有找到禁用转换的道具或标志。

4

2 回答 2

3

抽屉暴露了一个transitionDuration道具：

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

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

<Drawer transitionDuration={0} ...>

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

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

同样，将其设置为零可消除该效果。这个codesandbox是对material-ui Nested List demo的修改。

请记住，这Collapse只是使用Grow转换的元素的包装器。如果您不希望动画发生，您可以根据状态有条件地渲染项目。有关示例，请参见此其他代码框。

于 2018-02-22T20:19:16.937 回答
1

<Card />我有一个类似的问题，即使用<Collapse />面板渲染材料 UI 的虚拟列表以获得手风琴效果。

问题在于<Collapse />转换行为。即使将其timeout属性设置0为希望没有延迟，它仍然会导致延迟，即使在生命周期之后也会导致它完成渲染componentDidMount。<Drawer /> transitionDuration道具也是如此。

解决方案

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

但是如果真的想要动画效果包含，那么使用react-virtuoso代替react-window

于 2020-12-09T10:05:02.017 回答