Vue3中TransitionGroup元素从左上角出现的问题求助

需求说明 #

• 初始状态仅显示标题和图片；
• 鼠标悬停组件时，标题向上消失，图片上移占位，按钮从底部出现；
• 鼠标离开组件时，标题从顶部重现，图片下移占位，按钮向底部消失。

当前问题 #

标题和按钮始终从页面左上角出现，且图片仅在鼠标离开时触发动画，悬停开始时无动画。

已尝试方案 #

• 修改TransitionGroup中的type属性（transition、animation）；
• 为每个组件设置相同的key（虽违反官方文档，但可重新触发图片首尾动画）；
• 使用position: absolute；
• 使用transition-origin；
• 使用perspective-origin；
• 通过@beforeLeave钩子强制设置top和left属性；
• 将组件嵌入iFrame，发现元素从iFrame左上角出现。

内容的提问来源于stack exchange，提问作者MohamedT