0

我正在将一个 vuejs2 项目迁移到 vuejs3。在那个项目中，我有两个<router-view>嵌套级别，每个级别都有不同但相似的过渡。

简化第一个路由器级别看起来像在 vue2

<template>
  <transition v-bind:name="tDir" appear>
    <router-view />
  </transition>
</template>

在哪里tDir可以获得down-transition或up-transition价值。

第二个（嵌套）级别之一如下所示：

...
  <transition v-bind:name="tSide">
    <keep-alive>
      <router-view  />
    </keep-alive>
  </transition>
...

tSide可能在哪里left-transition或right-transition

相关的 CSS 将是这样的：

/*horizontal transitions*/
.left-transition-enter-active,
.right-transition-enter-active,
.left-transition-leave-active, 
.right-transition-leave-active {
  transition: all 0.4s ease-in-out;
}
.left-transition-leave-to,
.right-transition-leave-to,
.left-transition-enter,
.right-transition-enter {
    opacity: 0;
}
.left-transition-enter,
.right-transition-leave-active {
  transform: translateX(100%);
}
.right-transition-enter,
.left-transition-leave-active {
  transform: translateX(-100%);
}

/*vertical transition*/
.down-transition-enter-active,
.up-transition-enter-active,
.down-transition-leave-active,
.up-transition-leave-active {
  transition: all 0.4s ease-in-out;
}
.down-transition-leave-to,
.up-transition-leave-to,
.down-transition-enter,
.up-transition-enter {
  opacity: 0;
}
.down-transition-enter,
.up-transition-leave-active {
  transform: translateY(-100%);
}
.up-transition-enter,
.down-transition-leave-active {
  transform: translateY(100%);
}

为了迁移到 vue3，我对 css 类进行了此处指定的必要更正，并修改了此处<router-view>指定的、<keep-alive>和<transition>顺序和结构。同样正如这里所指定的，我为每个组件添加了一个唯一的键，并且我检查了每个要渲染的组件是单根的（它们已经是单根的，因为它们来自 vue2）。$route.name

关键是在前两个链接中进行修改后，第一级的过渡在第一次尝试时就起作用了，但是我从来没有能够使内部级别像以前一样工作，而且我的行为很奇怪。

使用这样的代码（固定转换名称以便left-transition于调试）：

<router-view v-slot="{ Component }">
  <transition name="left-transition">
    <keep-alive>
      <component v-bind:is="Component" v-bind:key="$route.name"/>
    </keep-alive>
  </transition>
</router-view>

从Component A（默认渲染）到 时Component B，Component A在稳定的过渡之后平滑离开，但Component B在过渡结束时立即出现在适当的位置。返回时，过渡效果很好，Component A进入和Component B离开，都在过渡之后。

如果我注释掉这些<keep-alive>块（比如在正常工作的外部级别中），则转换问题行为不会改变。但是如果我添加mode="out-in"，那么一切都按照 vue2 的预期工作，除了它们不是同时发生（显然），但在各个方向上的过渡都是平滑的。如果我切换到mode="in-out"，那么当从A到时B，A会在原地等待片刻，同时B应该出现（但它没有），然后A按预期消失，最后B在过渡结束时立即出现。回到模式时，B一切都按预期工作in-out。

对我来说这很奇怪，我不知道在哪里或如何继续这个问题。似乎过渡无法成功应用于Component B，但它只发生在一个方向上。当mode="out-in". Component A当它已经存在时，可以转换为不应用于其他组件的转换。

最后一句话可能更有意义，因为在实际应用中不仅有Component BbutComponent B和Component C。A可以去B或C，B而且C只能去A。A-B-A使用和观察到的行为相同A-C-A。但是 没有什么特别的Component A，它的根是一个 flex div，B和. 一样C。

控制台中没有警告或错误。请询问您需要的任何额外信息，我会很乐意编辑问题。

谢谢你的时间。

4

0 回答 0