tabs 切换时卡顿

[chanelnumberseven]

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

What problem does this feature solve?

ant-tabs-ink-bar 的动画好像是改变left值做的，用css3动画属性（transform）是不是性能会更好一点？

What does the proposed API look like?

使用css3动画属性（transform：translate）来改变ant-tabs-ink-bar 的移动，解决动画卡顿问题

[afc163]

性能差异会有多大？记得之前用的是 transform，也有很多渲染问题。

[github-actions]

Hello @chanelnumberseven. Please provide a online reproduction by forking this link https://u.ant.design/codesandbox-repro or a minimal GitHub repository. Issues labeled by Need Reproduce will be closed if no activities in 3 days.

你好 @chanelnumberseven, 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击 此处 创建一个 codesandbox 或者提供一个最小化的 GitHub 仓库。3 天内未跟进此 issue 将会被自动关闭。

[chanelnumberseven]

性能差异会有多大？记得之前用的是 transform，也有很多渲染问题。

https://developers.google.com/web/fundamentals/design-and-ux/animations/animations-and-performance?hl=zh-cn 参考这里的解释当使用transform，opacity来做动画时，会有一个单独的线程（合成器线程）来处理动画，不会占用主线程。给人感觉，性能应该优于非动画属性；

我刚在自己的项目里 尝试了一下transform，确实解决了卡顿的问题，是否可以给用户一个选择 启动css3动画？

[afc163]

我刚在自己的项目里 尝试了一下transform，确实解决了卡顿的问题

来个对比重现看看？

[chanelnumberseven]

我刚在自己的项目里 尝试了一下transform，确实解决了卡顿的问题

来个对比重现看看？

https://codesandbox.io/s/recursing-breeze-zzh87?file=/index.js:735-1118
数据量过大的话，，两种方案都会卡，但3000 5000 的时候，用transform所做的动画比非动画属性做的动画更顺畅

[thomas-void0]

我最近在项目中使用多个ant-pro的表格嵌套。使用tabs的来进行切换。确实tab卡顿非常的明显。

[fanguangjian]

just mark

[thomas-void0]

我使用了以下的方式可以避免tabs切换卡顿的问题。

这样的缺点就是，只能使用一些tabs的布局和切换效果。更多的配置项就无法使用了，无法保活隐藏页面。组件会被卸载和重新进入渲染流程。

不过至少界面上不会卡顿了，渲染就交给react吧

[afc163]

https://codesandbox.io/s/recursing-breeze-zzh87?file=/index.js:735-1118

这个例子在我机器上没感觉出明显差异。

[yoyo837]

https://codesandbox.io/s/recursing-breeze-zzh87?file=/index.js:735-1118

这个例子在我机器上没感觉出明显差异。

同

[chanelnumberseven]

https://codesandbox.io/s/recursing-breeze-zzh87?file=/index.js:735-1118

这个例子在我机器上没感觉出明显差异。

https://codesandbox.io/s/recursing-breeze-zzh87?file=/index.js 又改了下，，，感觉都卡，，，非css3动画属性 的执行明显延迟于css3动画属性，我的机器可能老，3000，5000条数据的时候就能感觉出来，， 我同事的机器高配的 10000条数据的时候，才能明显感觉出这种差距，但数据过多都会卡，感觉就算用css3动画属性也不是解决办法

[thomas-void0]

https://codesandbox.io/s/recursing-breeze-zzh87?file=/index.js:735-1118

这个例子在我机器上没感觉出明显差异。

https://codesandbox.io/s/recursing-breeze-zzh87?file=/index.js 又改了下，，，感觉都卡，，，非css3动画属性 的执行明显延迟于css3动画属性，我的机器可能老，3000，5000条数据的时候就能感觉出来，， 我同事的机器高配的 10000条数据的时候，才能明显感觉出这种差距，但数据过多都会卡，感觉就算用css3动画属性也不是解决办法

我的两个表格数据量不太大，只是请求的接口速度比较慢。loading的时间很长，在loading的过程中卡片切换的样式不会改变。要等我的全部数据渲染出来以后卡顿一会才能把样式切过来。 如果数据量比较小的话，是没有这个问题的。

[yyz945947732]

mark

[JunlinZhu-Tommy]

mark

[hesetiema]

mark

[chanTanya]

我使用了以下的方式可以避免tabs切换卡顿的问题。 这样的缺点就是，只能使用一些tabs的布局和切换效果。更多的配置项就无法使用了，无法保活隐藏页面。组件会被卸载和重新进入渲染流程。

不过至少界面上不会卡顿了，渲染就交给react吧
那你直接使用destroyInactiveTabPane属性就可以了：

[zombieJ]

Close since Tabs animation is changed.