javascript - Vue.js 2 页面和元素转换与 vue-router

Question

我正在尝试实现一个简单的页面进入和离开转换 ( Vue-CLI )。在 leave transition 上，我想在 vue-router 移动到下一个组件之前对一些元素进行动画处理。但是 <router-link>不要等待动画完成。

我的尝试:

App.vue: <router-view>包裹在 <transition ... >处理页面转换

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

当我使用 App.vue 导航离开组件时 <router-link> beforeRouteLeave被调用并设置 this.show: false为特定元素设置动画，然后继续。但是<router-link>立即渲染下一个组件，无需等待...

简而言之，我想实现与此类似的 smth http://animate.mhaagens.me/

有什么提示吗？

Answer 1

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

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