Animation Element inside Option in dropdown list of Select restart when transition finished.

[KaygNas]

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

May be related with #6636.

Version

3.2.20

Environment

Vue 3.2.45

Reproduction link

Steps to reproduce

1. open the console, click "Clear Console".
2. click "open" button to open dropdown of the select.
3. the "loading" icon starts the spin animation, after 0.4 second later, the spin animation suddenly restarts.
4. eye back to the logs on console, the option was rendered 32 times.

What is expected?

The option should only render one time, or the animation should not restart.

What is actually happening?

The option rendered 32 times, and the animation suddenly restarted.

[github-actions[bot]]

Hello @KaygNas. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please send your Pull Request to proper branch, fill the Pull Request Template here, provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!

你好 @KaygNas，我们完全同意你的提议/反馈，欢迎直接在此仓库创建一个 Pull Request 来解决这个问题。请将 Pull Request 发到正确的分支，务必填写 Pull Request 内的预设模板，提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等，并确保 CI 通过，我们会尽快进行 Review，提前感谢和期待您的贡献。

[KaygNas]

Actually, my real problem is "Animation Element inside Option in dropdown list of Select restart when transition finished.". I had found the reason, it was caused by the side effect of alignDIsabled, more details:

when the dropdown was opened, status changed as below:

We can notice that alignDisabled changed in the order of 'true -> false -> true -> false' along with status, every time alignDisabled changes to false, forceAlign would be called in component Align(Align.tsx#L162).

While the dropdown was turning into visible, status changed from 'align' to 'motion', therefore alignDisabled changed from false to true. At that moment, the animation of the option started to play as well as the transition of the option list.

After the transition finished, status changed to 'stable', therefore alignDisabled changed to false, forceAlign was called resulting the restart of the option animation which was playing. That is where the problem at.

• status is declare at PopupInner.tsx#L52
• alignDisabled is declared at PopupInner.tsx#L129
• status is set to 'stable' when transition finished at PopupInner.tsx#LL100C35-L100C35

Though the problem is found, but I can't figure out how to fix it. Below are candidate solutions:

• Can I keep alignDisabled to be true when the transition finished?
• Can forceAlign(Align.tsx#L69) not to restart the animation yet still do it's job well? I notice that the function rely on alignElement of package 'dom-align', maybe it can be fixed there?

I wonder are there any advices @tangjinzhou or others can offer?

[KaygNas]

I send a pull request https://github.com/vueComponent/ant-design-vue/pull/6662 try to enable align when status 'motion' to avoid animation of child restart when transition finished, but I wonder it is safe to make this change without break anything others?

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.