fix: collapse component expands blank issue #6619

yezhonghu0503 commented 1 month ago

Using MutationObserver to change the order in which height change animations are executed, I think the height animations should be triggered after DOM rendering is complete.

Currently, most modern browsers have implemented the MutationObserver API:

Chrome: Supported from version 18 onwards
Firefox: Supported from version 14 onwards
Safari: Supported from version 6.1 onwards
Opera: Supported from version 15 onwards
Edge: Supported from version 79 onwards
Internet Explorer: Never supported

resolve https://github.com/ant-design/ant-design-mobile/issues/6619

github-actions[bot] commented 1 month ago

PR preview has been successfully built and deployed to https://antd-mobile-preview-pr-6627.surge.sh

zombieJ commented 1 month ago

Hi, what's the relative issue of reproduce?

yezhonghu0503 commented 1 month ago

Hi, what's the relative issue of reproduce?

here #6619

yezhonghu0503 commented 1 month ago

我的英语不是特别好，我怕我表达的让您混淆，原谅我用中文描述一下这个问题，问题在#6619，他把Ellipsis组件和Collapse里同时使用了，我看了源码，Collapse一开始是不会渲染props.children的，然后到这里是没啥问题的，问题在于Ellipsis里面有个折叠文字计算的过程，也就是calcEllipsised函数，它会在useIsomorphicLayoutEffect里面才执行，这里就有意思了，Ellipsis组件里面是在useIsomorphicUpdateLayoutEffect钩子函数里面去执行高度变化的动画的，但是useIsomorphicUpdateLayoutEffect 优先级貌似高于useIsomorphicLayoutEffect，也就是说，Ellipsis实际的高度还没计算出来，Collapse就用默认的props.children的高度来渲染动画了，所以造成了这个情况，以上纯属我个人看了源码之后的一些见解，如有不对请指出

ant-design / ant-design-mobile

fix: collapse component expands blank issue #6619 #6627