Vue 过渡和即时淡出组件

Question

目前在 Vue 中使用过渡时，我面临的问题是页面上的某些组件会立即消失，而其余组件会随着整个页面正常淡出。

这是我的过渡设置为最小可重现示例，在这里工作Codepen 您可以看到，当从Home 路由切换到任何其他路由时，按钮会立即消失，而视图的其余部分会根据使用 css（和 vue 转换）设置的淡化属性消失。

// https://github.com/groloop/vuejs-2-series
Vue.use(Vuetify);
Vue.use(VueRouter);

var Home = {
  template: '<div> <h2>Home</h2> <v-tooltip left> <template v-slot:activator="{ on }"> <v-btn color="primary" dark v-on="on">Left</v-btn> </template> <span>Left tooltip</span> </v-tooltip> </div>'
}

var AboutUs = {
  template: '<h2>About Us</h2>'
}

var Contact = {
  template: '<h2>Contact</h2>'
}

var NotFound = {
  template: '<h2>Not Found</h2>'
}


var router = new VueRouter({
  history: false,
  routes: [
    { path: '/', name: 'home', component: Home },
    { path: '/about-us', name: 'about-us', component: AboutUs },
    { path: '/contact', name: 'contact', component: Contact },
    { path: '*', name: 'not-found', component: NotFound }
  ],
});

new Vue({
  el: '#app',
  router: router
});

.fade-enter-active,
.fade-leave-active {
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: ease-in;
}

.fade-enter-active {
  transition-delay: .5s;
}

.fade-enter,
.fade-leave-active {
  opacity: 0
}

<link href="https://unpkg.com/vuetify@1.5.16/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://unpkg.com/vuetify@1.5.16/dist/vuetify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.10/vue.js"></script>
<div id="app">
  <v-toolbar>
    <v-toolbar-title>TEST</v-toolbar-title>
    <v-spacer></v-spacer>
    <v-toolbar-items>
      <v-btn flat href="#/">Home</v-btn>
      <v-btn flat href='#/about-us'>About us</v-btn>
      <v-btn flat href='#/contact'>Contact</v-btn>
      <v-btn flat href='#/test'>Test</v-btn>
    </v-toolbar-items>
  </v-toolbar>
  <transition name="fade" mode="out-in">
    <router-view></router-view>
  </transition>
</div>

Answer 1

这可能是由于v-tooltip 在内部的工作方式。可以看到，如果把按钮组件放在v-tooltip组件中的模板槽之外，transition就可以正常工作了。

v-tooltip 组件可能有一个销毁生命周期挂钩，它只会销毁渲染的 DOM 节点，这可能会导致问题。一种解决方法是让<router-view> 保持活动状态：

<transition name="fade" mode="out-in">
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</transition>

但是，这可能并不理想，特别是如果您的路由器使用了非常重的组件，或者如果您有很多视图要保持活动状态：

解决方案 1：限制组件的最大数量以保持活动状态

由于您只关心最后一个被破坏的组件的淡出，您可以在<keep-alive> 包装器上使用max 属性，这样您就只保留最后一个被破坏的元素。这样的事情会起作用：

<transition name="fade" mode="out-in">
  <keep-alive v-bind:max="2">
    <router-view></router-view>
  </keep-alive>
</transition>

解决方案 2：显式包含需要保持活动状态的组件

或者，您可以选择性地保持带有<v-tooltip> 的组件处于活动状态。在您的示例中，只有 Home 组件有问题，因此您可以为其命名：

var Home = {
  template: '<div> <h2>Home</h2> <v-tooltip> <template v-slot:activator="{ on }"> <v-btn color="primary" dark v-on="on">Left</v-btn> </template> <span>Left tooltip</span> </v-tooltip> </div>',
  name: 'Home'
}

然后动态绑定一个数组到<keep-alive>组件上的include属性：

<transition name="fade" mode="out-in">
  <keep-alive :include="componentsToKeepAlive">
    <router-view></router-view>
  </keep-alive>
</transition>

在你的 JS 中：

new Vue({
  el: '#app',
  router: router,
  data: {
    componentsToKeepAlive: ['Home']
  }
});