使用vue-router进行Vue.js 2页面和元素转换

Question

我试图实现一个简单的页面进入和离开转换（Vue-CLI）。在离开过渡上，我想在vue-router移动到下一个组件之前为一些元素设置动画。但是<router-link>不等待动画完成。

我的尝试：

包含在<router-view>中的

App.vue： <transition ... >处理页面转换

Component.vue： mounted()将状态设置为this.show: true，<transition ... >和v-if为渲染中的特定元素设置动画

当我离开具有App.vue <router-link>的组件时，调用beforeRouteLeave并设置this.show: false以设置特定元素的动画，然后继续前进。但<router-link>立即呈现下一个组件而不等待......

简而言之，我希望获得类似于此http://animate.mhaagens.me/

的smth

任何提示？

Answer 1

我不确定它是否能解决你所有的问题，特别是因为我不确切知道你在寻找什么行为，但是Vue中的过渡效果提供了过渡模式。

transition mode="out-in"也许就是你要找的东西。它等待第一个转换在开始新转换之前结束，并且在组件之间转换时很有用。查看the docs，它们非常彻底且非常好。