我目前正在try 在一个小组件上集成动画，该组件包含:一个标题、一个图像和一块按钮.
规则如下:
- 最初，我们只有标题和图像，
- 当您将鼠标悬停在组件上时，标题朝顶部消失，图像上升并取而代之，按钮从底部出现.
- 当我们停止将鼠标悬停在组件上时，标题将从顶部重新出现，图像将再次向下移动，取代按钮，并且按钮将朝着底部消失.
目前，由于某些未知的原因，组件(标题和按钮)系统地来自页面的左上角.更重要的是，只有当悬停停止时，图像才会有动画效果，而不是在开始时.
这是一张link to the VueJS playground英镑的钞票，让你看看它是如何工作的
您的帮助我们将不胜感激
我已经试过了:
- 转换组中的类型修改(
transition,animation) - 在每个组件上放置相同的
key，即使这是official documentation所禁止的，也会在开始和结束时重新激活图像上的动画. - 使用
position: absolute - 使用
transition-origin - 使用
perspective-origin - 通过
@beforeLeave钩子强制使用顶部和左侧属性 - 将组件集成到
iFrame中，注意组件(标题和按钮)出现在iFrame的左上角(这并不奇怪).