在离开动画完成之前输入动画开始

Question

我想为我的Vue路由创建幻灯片+淡入淡出过渡。在这里，您可以看到我想要达到的效果：

https://discord.js.org/#/docs/main/stable/general/welcome

“旧”页面向右滑动并淡出，然后，“新”页面向左滑动并淡入。

当前，我添加了一个过渡，但是“新”容器在“旧”容器完成其动画之前开始其动画。我创建了一个片段来重现该问题：

https://codesandbox.io/s/o1jkpkl75q

需要解决哪些问题才能获得所需的过渡动画？

Answer 1

尝试将mode="out-in"添加到transition：

<transition name="slide-fade" mode="out-in">

更新了您的CodeSandbox：