我目前正在尝试在一个小组件上集成动画，该组件包含：标题、图像和按钮块。
规则如下：
- 最初，我们只有标题和图像，
- 当您将鼠标悬停在组件上时，标题会向顶部消失，图像会上升并占据其位置，按钮会从底部出现，
- 当我们停止悬停在组件上时，标题从顶部重新出现，图像返回到底部，取代按钮，按钮向底部消失。
目前，由于某些未知的原因，组件（标题和按钮）系统地来自页面的左上角。更重要的是，只有当悬停停止时，图像才会被动画化，而不是在悬停开始时。
这里有一个链接到VueJSPlayground，向你展示它是如何工作的
你的帮助将不胜感激
我已经试过了：
- TransitionGroup中的类型修改（
transition，animation） - 在每个组件上放置相同的
key，即使官方文档禁止这样做，也会重新激活图像开头和结尾的动画。 - 使用
position: absolute - 使用
transition-origin - 使用
perspective-origin - 通过
@beforeLeave钩子强制顶部和左侧属性 - 将组件集成到
iFrame中，注意组件（标题和按钮）出现在iFrame的左上角（这并不奇怪）。
1条答案
按热度按时间xwbd5t1u1#
当使用
v-if而不是v-show时，元素将停止从左上角进入。另外，我认为type="animation"只有在你同时使用CSS动画和过渡时才是必要的，但你只使用过渡。最后，您可以定位要将它们移动到的位置。为了平滑过渡，在leaving元素上使用绝对位置，这样空间会立即空出：
这是在操场上。希望它能帮助