vue过渡组件在动画期间消失

Question

我在页面之间导航时使用了 Vue Transition 并发现了问题。我有一个表格，里面有组件，当我开始转换到新页面时，动画开始并且表格中的一些组件消失，表格重新渲染并在完成转换之前闪烁。很长一段时间我都无法理解问题是什么，直到我自己通过链接https://codepen.io/gleb-shalajkin/pen/PoGgejp 在代码盘中复制了它。点击按钮进入表页面，然后返回主页面，关注v-chip。它会在过渡期间从你身上消失。问题是对于表格我使用了某个字段的模板，而在这个模板中我使用了另一个模板，只是这次是 v-tooltip。由于模板内有另一个模板，因此会出现此问题。到目前为止，我不知道如何解决它。如果有任何帮助，我将不胜感激。

codepan 中的代码：

const Main = {
    template: '#contacts'
}

const ChildComponent = {
  template: "#childComponent"
}

const Table = {
  components: {
    'child-component': ChildComponent
  },
  data () {
    return {
        headers: [
          {
            text: 'Dessert (100g serving)',
            align: 'start',
            value: 'name',
          },
          { text: 'Calories', value: 'calories' },
          { text: 'Fat (g)', value: 'fat' },
          { text: 'Carbs (g)', value: 'carbs' },
          { text: 'Protein (g)', value: 'protein' },
          { text: 'Iron (%)', value: 'iron' },
        ],
        items: [
          {
            name: 'Frozen Yogurt',
            calories: 159,
            fat: 6.0,
            carbs: 24,
            protein: 4.0,
            iron: '1%',
          },
                    {
            name: 'Frozen Yogurt',
            calories: 159,
            fat: 6.0,
            carbs: 24,
            protein: 4.0,
            iron: '1%',
          },
                    {
            name: 'Frozen Yogurt',
            calories: 159,
            fat: 6.0,
            carbs: 24,
            protein: 4.0,
            iron: '1%',
          }
        ],
      }
  },
  computed: {
      vTable () {
        return {
          options: {
            itemsPerPage: 15
          },
          headers: this.headers,
          items: this.items,
          footerProps: {
            itemsPerPageText: 'Кол-во элементов на странице',
            itemsPerPageOptions: [15, 30, 50, 100]
          },
          noDataText: 'Нет данных',
          loadingText: 'Идет загрузка...'
        }
    }
  },
  template: "#table"
}

const routes = [
    {path: '/', name: 'Main', component: Main},
    {path: '/table', name: 'Table', component: Table }
]

const router = new VueRouter({
    routes
})

new Vue({
  vuetify: new Vuetify(),
    router
}).$mount('#app');

.fade-enter-active,
.fade-leave-active {
  transition-duration: 1.2s;
  transition-property: opacity;
}

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

<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script type="text/x-template" id="contacts">
  <v-btn block color="red" dark :to="{ name: 'Table' }">Go to tables</v-btn>
</script>

<script type="text/x-template" id="childComponent">
        <v-tooltip bottom>
          <template v-slot:activator="{ on, attrs }">
            <v-chip
                color="action"
                dark
                v-bind="attrs"
                v-on="on"
            ><slot></slot></v-chip>
          </template>
          <span>test</span>
        </v-tooltip>
</script>

<script type="text/x-template" id="table">
  <div>
    <v-btn block color="red" dark :to="{ name: 'Main' }">Go to main</v-btn>
    <v-data-table
       v-bind="vTable"
    >
     <template v-slot:[`item.name`]="{ item }">
       <!--test child component -->
       <child-component>
         <strong>{{ item.name }}</strong>
       </child-component>
      </template>
    </v-data-table>
  </div>
</script>

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

Answer 1

问题出在 vuetify 版本中。显然这是一个错误，他们修复了它。在 2.6.3 版本之后一切正常。