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

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

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

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

需要修复什么才能获得所需的过渡动画

尝试将

mode=“out in”

添加到

转换中：

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



更新了您的代码沙盒：