<Drawer> showing animation is jiggling if the content is changing size.

[heroboy]

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

Reproduction link

Steps to reproduce

首先body要有滚动条。在Drawer的显示过程中，内容逐渐增加大小发生变化。

What is expected?

正常动画

What is actually happening?

显示动画抖动。消失动画也不正常。

Environment	Info
antd	4.11.2
React	16.14.0
System	windows
Browser	chrome

[heroboy]

请用chrome测试，我在firefox上没试出来。有可能某些参数要微调一下。

[afc163]

没看到问题，来个录屏？

[heroboy]

消失动画也没有划出的动画。
实际抖动根据不同情况可能不同，有时候会更夸张。我建议测试的时候，可以调整一下wait的时间，增加页面复杂度让浏览器处理起来慢一点。可能会增加复现的成功率。

[afc163]

我的机器上貌似很难重现这个问题。

[heroboy]

@afc163 根据我的测试，只有chrome会这样。firefox和ios不会。直接使用rc-drawer也会这样。
但是只要一设置<RcDrawer level={null}/>，抖动就消失了。

但是你看这段代码：
https://github.com/react-component/drawer/blob/5b659ce52581f22a1faf1a403c0fd214502efb89/src/DrawerChild.tsx#L183-L187

这是对this.levelDom数组中每个元素监听transition end的回调。
会对每个元素的每个transition属性都会回调一次。界面上如果用的是(本身有transition的动画)，这个事件会回调好几次。这是不是不太对啊。

我在使用rc-drawer的时候，发现drawer在升上来的时候，整个body的滚动条在往下滚动，是不是这样造成的抖动啊。（level=null的时候，body就不会往上滚动。还不是很会使用rc-drawer, 好像rc-drawer的示例里，都是drawer出现的时候，把整个页面往上顶的。antd drawer是覆盖在页面上的）。不是很清楚。

明天我会继续研究一下。

[afc163]

看上去可以优化一下，让 transitionEnd 事件只对绑定的元素生效。

[heroboy]

算了，level=null的时候，抖动效果很微弱。明天再看。

[heroboy]

https://codesandbox.io/s/amazing-tharp-bnmln?file=/src/App.js
做了最简单的示例来演示这个效果。自己做了一个类似于antd的Drawer。
测试方式就是不停的点open和背景来打开关闭drawer，运气差的话重复十几次会出现吧。

我感觉关键的地方就是，设置{transform: 'translateZ(0)'}，然后下一帧{transform:''}。
只在我的最新的chrome能重现，用了chrome的edge浏览器都没问题（但是明显edge的动画没chrome流畅）。

我觉得是chrome本身的bug。translateZ(0)应该是为了触发硬件加速，结果触发了渲染bug。

[afc163]

@heroboy 看看最新版本是否还存在这个问题。

[heroboy]

@afc163
最顶上那个codesandbox都打不开了。

ModuleNotFoundError
Could not find module in path: 'rc-util/5.7.0/es/Dom/dynamicCSS' relative to '/node_modules/@ant-design/icons/es/utils.js'

你想close就close吧。
这种换了浏览器或升级个版本，而且别人也不能轻易重现的奇怪问题，很难修，就当它不存在吧。

[afc163]

https://codesandbox.io/s/zi-ding-yi-wei-zhi-antd-4-11-2-forked-5488nv?file=/package.json

@heroboy 这个 codesandbox 可以打开

[heroboy]

@afc163
你这个codesandbox是最新的antd。我原始提交的时候是4.11.2。我想能在4.11.2这个版本重现这个bug，然后切换到最新版本这个bug消失了，才算修好了吧。否则的话，很有可能是我的浏览器升级了，才导致bug消失的。

[afc163]

也就是现在没现场了是吧？

[heroboy]

@afc163
不是，是上面的codesandbox中，antd改成4.11.2就会编译报错，测不了。

[afc163]

可以拿 codepen 或 stackblitz 测。

[afc163]

先关了，有重现再开。