Reproduction link
https://ant-design.antgroup.com/components/layout-cn?from=msidevs.net
Steps to reproduce
通过官方文档即可复现：
1.访问antd官方文档，找到Layout组件
2.找到示例“自定义触发器”
3.点击触发器，触发收缩，展开，可以观察到展开时的动画明显抖动不平滑
What is expected?
展开的动画过渡效果应该是平滑的
What is actually happening?
展开的动画过渡效果在开始时出现了抖动
| Environment | Info |
| ------------ | ------------ |
| antd | 5.15.4 |
| React | 18 |
| System | windows10，ubuntu22.04 |
| Browser | chrome 120.0.6099.224 |
3条答案
按热度按时间hzbexzde1#
2024.03.27.16.14.52.webm
ogsagwnx2#
可以通过修改以下样式解决问题
.ant-menu-inline-collapsed >.ant-menu-item{ inset-inline-start: 0; padding-inline: calc(50% - calc(var(--ant-font-size-lg) / 2) - var(--ant-menu-item-margin-inline)); text-overflow: clip; }例如，将其修改为
.ant-menu-inline-collapsed >.ant-menu-item{ inset-inline-start: 0; padding-inline: calc(40px - calc(var(--ant-font-size-lg) / 2) - var(--ant-menu-item-margin-inline)); text-overflow: clip; }实际效果，录制的视频存在卡顿，实际不存在
录屏 2024年03月27日 16时25分45秒.webm
这可以充作临时解决方案，但还是期待官方解决这个问题
nbnkbykc3#
PR welcome