css MUI在Material-UI中折叠动画/过渡带边距

wtlkbnrh  于 2023-10-21  发布在  其他
关注(0)|答案(1)|浏览(83)

我一直在使用MUI-Collapse组件来呈现列表中的可折叠内容。我希望列表的Collapse组件之间有垂直间距,但我不希望在Collapse被折叠时保持间距,我正在努力实现一个好的解决方案。

到目前为止,我已经尝试过只在Collapse处于扩展状态时在Collapse组件上设置margin-top,并对该属性应用转换,但它仍然看起来很奇怪,因为转换被延迟了。有没有一种方法可以让间距/边距包含在过渡动画中,使动画平滑?
下面是一个代码沙箱:https://codesandbox.io/s/stoic-mclaren-csg2wg?file=/src/App.tsx
很高兴听到任何建议!

0md85ypi

0md85ypi1#

经过进一步调查,我发现了一个解决方案--将margin-top应用于实际的内部 Package 器项本身就解决了这个问题。
例如:

"& .MuiCollapse-wrapperInner": {
    marginTop: "20px"
  }

我猜这会迫使折叠组件确保过渡应用于整个内容,包括指定的边距?这将产生漂亮、平滑的动画。

相关问题