feat(message): Optimize Message component animation effects

[jianxing-xu]

Types of changes

• [ ] New feature
• [ ] Bug fix
• [x] Enhancement
• [ ] Component style change
• [ ] Typescript definition change
• [ ] Documentation change
• [ ] Coding style change
• [ ] Refactoring
• [ ] Test cases
• [ ] Continuous integration
• [ ] Breaking change
• [ ] Others

Background and context

Message 组件在同时存在多个的情况下手动关闭最后一个会出现从底部飞到顶部的动画，是一个明显的问题

Solution

去掉 MessageList 组件的 Flex 布局， 以防止 .fade-message-leave-active 元素跑到顶部 优化 vue 动画类名 优化前： 优化后：

How is the change tested?

Changelog

Component	Changelog(CN)	Changelog(EN)	Related issues
Message	优化Message组件动画效果	optimize Message animation effects	-

Checklist:

• [x] Test suite passes (npm run test)
• [ ] Provide changelog for relevant changes (e.g. bug fixes and new features) if applicable.
• [ ] Changes are submitted to the appropriate branch (e.g. features should be submitted to feature branch and others should be submitted to main branch)

Other information

[codesandbox[bot]]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders
Open Preview