Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

menu菜单打开下级的时候会顿一下 #873

Closed
1 task
zboMa opened this issue Jun 17, 2019 · 10 comments
Closed
1 task

menu菜单打开下级的时候会顿一下 #873

zboMa opened this issue Jun 17, 2019 · 10 comments
Assignees
Labels
Accept You are right, we should do that enhancement outdated Stale

Comments

@zboMa
Copy link

zboMa commented Jun 17, 2019

  • I have searched the issues of this repository and believe that this is not a duplicate.

Version

1.3.10

Environment

随便什么环境,官网示例就能测出来

Reproduction link

https://vue.ant.design/components/menu-cn/

Steps to reproduce

打开官网,搜索menu,点击示例侧边栏打开随便一个

What is expected?

内存div,li里面的那个class为ant-menu-submenu-title的那个,margin-top去掉。

What is actually happening?

1 内层div给了top和bottom的margin各4px
2 但是因为div外面就是li,所以div的margin被计算给了li
3 而li的bottom和下一个li的top重叠了
4 此时如果打开这个li,则因为加载子级目录的原因,margin-bottom重新计算给了div,于是高度突然会多处4px,之后才会开始子级展示动画
5 由此造成的类似卡顿体验,令人苦恼
6 希望改进,建议是去掉margin-top。这样既不会丢失原来的期望,也可以解决卡顿问题。唯一的改变是整体ul会少一个margin-top: 4px。


没了。

@iswangaiguo
Copy link

同样的困惑

@ZhaoAndQian
Copy link

在性能不高的电脑中比较明显,给人感觉很卡一样

@iswangaiguo
Copy link

在性能不高的电脑中比较明显,给人感觉很卡一样

看来是我电脑性能不行。。。

@ZhaoAndQian
Copy link

我自己用的开发电脑打开也有一点卡顿,老板的电脑是旧电脑打开要等上估计1秒

@vvizden
Copy link

vvizden commented Oct 21, 2019

同样的苦恼,怎么解决呢

@zboMa
Copy link
Author

zboMa commented Oct 21, 2019

解决方案第6条已经给了,我不知道官方解决了吗,我是直接覆盖了样式。

.ant-menu-submenu:first-of-type {
  margin-top: 4px;
}
.ant-menu-submenu-title {
  margin-top: 0;
}

@vvizden
Copy link

vvizden commented Oct 21, 2019

解决方案第6条已经给了,我不知道官方解决了吗,我是直接覆盖了样式。

.ant-menu-submenu:first-of-type {
  margin-top: 4px;
}
.ant-menu-submenu-title {
  margin-top: 0;
}

感谢,目前官方还存在这个问题。我对比react,按照你给的样式覆盖后,发现还是没有react般丝滑

@tangjinzhou tangjinzhou added the Accept You are right, we should do that label Oct 25, 2019
@tangjinzhou tangjinzhou self-assigned this Oct 25, 2019
@tangjinzhou
Copy link
Member

ref ant-design/ant-design#19477

tangjinzhou pushed a commit that referenced this issue Oct 30, 2019
* 间距margin重置的bug

* Update index.less

解决margin重合问题,overflow方式会有副作用,采用padding解决margin重合现象。
@github-actions
Copy link

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days

@github-actions
Copy link

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Feb 18, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Accept You are right, we should do that enhancement outdated Stale
Projects
None yet
Development

No branches or pull requests

5 participants