我一直在使用MUI-Collapse组件来呈现列表中的可折叠内容。我希望列表的Collapse组件之间有垂直间距,但我不希望在Collapse被折叠时保持间距,我正在努力实现一个好的解决方案。
到目前为止,我已经尝试过只在Collapse处于扩展状态时在Collapse组件上设置margin-top
,并对该属性应用转换,但它仍然看起来很奇怪,因为转换被延迟了。有没有一种方法可以让间距/边距包含在过渡动画中,使动画平滑?
下面是一个代码沙箱:https://codesandbox.io/s/stoic-mclaren-csg2wg?file=/src/App.tsx
很高兴听到任何建议!
1条答案
按热度按时间0md85ypi1#
经过进一步调查,我发现了一个解决方案--将
margin-top
应用于实际的内部 Package 器项本身就解决了这个问题。例如:
我猜这会迫使折叠组件确保过渡应用于整个内容,包括指定的边距?这将产生漂亮、平滑的动画。