fix: collapse component expands blank issue #6619

[yezhonghu0503]

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 #6619

[github-actions]

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

[zombieJ]

Hi, what's the relative issue of reproduce?

[yezhonghu0503]

Hi, what's the relative issue of reproduce?

here #6619

[yezhonghu0503]

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