Javascript 淡入/淡出在Vue'中不起作用；s路由器转换

问题：

我使用的是Vue的路由器，它可以正确地从一个组件切换到另一个组件。然而，我将它包装在一个

中，但它一点也不褪色

预期行为：

使用渐变效果从一个组件切换到另一个组件

重新提交的问题：

将我的项目克隆到一个代码沙盒中，路由器链接位于表单下方。项目URL:

---

真希望有人能帮助我。

问题：

除了过渡名称

fade

不在您的

App.vue

文件中之外，所有内容都是正确的

使用的第三方框架已经有一个

fade

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>