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.

Sign up for GitHub

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

Jump to bottom

Tabs 内容过大在切换时会出现内容闪烁，但是 antd@4.3.1 不会 #25343

Closed
1 task done
yunsii opened this issue Jul 1, 2020 · 20 comments · Fixed by react-component/tabs#296
Closed
1 task done

Tabs 内容过大在切换时会出现内容闪烁，但是 antd@4.3.1 不会 #25343

yunsii opened this issue Jul 1, 2020 · 20 comments · Fixed by react-component/tabs#296

Comments

@yunsii
Copy link

yunsii commented Jul 1, 2020

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

Reproduction link

https://theprimone.top/ant-design-pro-plus

Steps to reproduce

demo 是安装的 antd@4.3.1 ，切换页面时不会闪烁。如果安装 4.4.0 等则会导致页面切换时会闪一下。

What is expected?

像 4.3.1 那样即使内容过大也不会闪烁。

What is actually happening?

新版本 antd 在内容过大时切换会闪烁。

Environment Info
antd 4.4.0
React ^16.13.1
System Deepin 15.11
Browser Chrome 81
@yunsii yunsii changed the title Tabs 内容过大会出现内容闪烁，但是 antd@4.3.1 不会 Tabs 内容过大在切换时会出现内容闪烁，但是 antd@4.3.1 不会 Jul 1, 2020
@zombieJ
Copy link
Member

zombieJ commented Jul 1, 2020

我好像没看出来，你能上个 gif 看看吗？

@yunsii
Copy link
Author

yunsii commented Jul 1, 2020

@zombieJ 现在我用 最新的 4.4.0 编译部署的，打开多个标签页之后切换就能看到首页那两个字在闪了。

@zombieJ
Copy link
Member

zombieJ commented Jul 2, 2020

ref react-component/tabs@6b2c25c

@yunsii
Copy link
Author

yunsii commented Jul 2, 2020

看了一下，直接给 TabPane 配置 visibility: 'visible' 就可以了，也没发现什么问题。所以没理解为什么需要那样子改呢？

@yunsii yunsii mentioned this issue Jul 2, 2020
Closed
@zombieJ
Copy link
Member

zombieJ commented Jul 2, 2020

印象里是为了解决非动画下的闪烁问题，当时没留更多评注，失误了。

@yunsii
Copy link
Author

yunsii commented Jul 2, 2020

现在我这个情况就是没有动画啊，之前也是为了解决闪烁的问题？绕晕了

@zombieJ
Copy link
Member

zombieJ commented Jul 2, 2020

嗯，是为了解决其他闪烁的问题。我先还原一下看看。

@yunsii
Copy link
Author

yunsii commented Jul 2, 2020

还有其他的闪烁问题啊，那我还是先配置 visibility: 'visible' 解决下吧。

@zombieJ
Copy link
Member

zombieJ commented Jul 2, 2020

你能拆解出一个 codesandbox 不？

@zombieJ
Copy link
Member

zombieJ commented Jul 2, 2020

我直接用 Tabs 没重现出你的问题，想看看还有什么因素影响到了。

@yunsii
Copy link
Author

yunsii commented Jul 2, 2020

可以，我下班回去搞一个。

@yunsii
Copy link
Author

yunsii commented Jul 2, 2020

我直接用 Tabs 没重现出你的问题，想看看还有什么因素影响到了。

我也很疑惑，因为我看官方 Tabs 的 demo 也不存在这个问题。不知道是不是因为我这个情况下每个标签页都是一个 Switch 路由组件的问题？

@yunsii
Copy link
Author

yunsii commented Jul 2, 2020

尽力尝试了，还真是搞不出来一个 codesandbox _(:3J∠)_

只能说下我的代码了。我在这里拦截路由后返回的标签页组件。tabs 的元素定义 RouteTab ，其中 content 就是 umi 传入的路由组件 children 了，要说特殊的话也就这里我觉得比较特殊了。

@zombieJ
Copy link
Member

zombieJ commented Jul 3, 2020

推测是 Tabs 比 Router 更快的显示了 active 的 Tab content，但是展示时 Route 还未同步导致的。如果是这样，那就改成只用 Tabs 的标签，而不用 TabPane 的 children。在外面自行实现 children 内容试试。这样两边就解耦了。

@yunsii
Copy link
Author

yunsii commented Jul 3, 2020

那这个能解释配置了 visibility: 'visible' 就没问题吗？而且我控制了 children 的渲染，如果是打开过的路由的 children 是不会刷新的。

@zombieJ
Copy link
Member

zombieJ commented Jul 3, 2020

没有重现我也没法得知 visibility: 'visible' 表现是什么样子的。

@yunsii
Copy link
Author

yunsii commented Jul 3, 2020 •
edited

如果可以的话，可以试试下载代码库 https://github.com/theprimone/ant-design-pro-plus

安装依赖启动后修改这里就可以看到效果了。

@afc163
Copy link
Member

afc163 commented Jul 7, 2020 •
edited

如果可以的话，可以试试下载代码库 https://github.com/zpr1g/ant-design-pro-plus

我没发现什么闪烁。antd@4.4.1

@yunsii
Copy link
Author

yunsii commented Jul 7, 2020

@afc163 我在这里使用之前说到的办法临时解决了，你可以注释掉再看看效果。

afc163 added a commit to react-component/tabs that referenced this issue Jul 7, 2020
@afc163
improve Tabs switch perfermance
0503687 
ant-design/ant-design#25343

when animated is false, using display: none

visibility: hidden is much slower then display: none
@afc163 afc163 mentioned this issue Jul 7, 2020
Merged
afc163 added a commit to react-component/tabs that referenced this issue Jul 7, 2020
@afc163
⚡️ improve Tabs switch performance
6d7d734 
close ant-design/ant-design#25343

When animated is false, using display: none which is much faster than visibility: hidden
zombieJ pushed a commit to react-component/tabs that referenced this issue Jul 8, 2020
@afc163
⚡️ improve Tabs switch performance (#296)
ce7ddcf 
close ant-design/ant-design#25343

When animated is false, using display: none which is much faster than visibility: hidden
@GCpigsic
Copy link

GCpigsic commented Nov 3, 2020

我这边也会遇到这种情况，版本3.11.6，用 visibility: 'visible'也没能解决。

@yunsii yunsii mentioned this issue May 17, 2021
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

⚡️ improve Tabs switch performance react-component/tabs
4 participants
@afc163 @zombieJ @GCpigsic @yunsii