淡入/淡出在Vue的路由器转换中不起作用

Question

问题：

我正在使用Vue的Router，它可以在组件之间正确切换。但是，我将其包裹在<transition name="fade" mode="out=in">内，但它完全不会褪色。

预期行为：

使用淡入淡出效果在组件之间切换。

已拒绝的问题：

将我的项目克隆到CodeSandbox中，路由器链接位于表单下方。项目网址：

https://codesandbox.io/s/z2kjlyrq64?fontsize=14

真的希望有人能够帮助我。

Answer 1

问题：

一切都正确，除了过渡名称fade不在您的App.vue文件中。

所使用的第三方框架已经具有fade CSS规则，该规则将覆盖您的CSS规则。

修复：

更改过渡名称。

<template>
  <div id="app">
    <a-row type="flex" justify="space-around" align="middle">
      <a-col :xs="24" :sm="24" :lg="15" :xl="17" class="bg-img"></a-col>
      <a-col :xs="24" :sm="24" :lg="9" :xl="7" class="height-50">
        <transition name="fade-custom" mode="out-in">
          <router-view></router-view>
        </transition>
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

<style lang="scss">
.fade-custom-enter-active,
.fade-custom-leave-active {
  transition: opacity 0.5s;
}
.fade-custom-enter,
.fade-custom-leave-to {
  opacity: 0;
}
</style>

Revised CodeSandbox