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

【问题标题】：Fade in/out not working in Vue's Router Transition淡入/淡出在 Vue 的路由器转换中不起作用
【发布时间】：2019-09-24 10:31:29
【问题描述】：

问题：

我正在使用 Vue 的路由器，它可以正确地从组件切换到组件。但是，我将它包裹在 <transition name="fade" mode="out=in"> 中，但它根本不会褪色。

预期行为：

使用淡入淡出效果从一个组件切换到另一个组件。

转载问题：

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

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

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

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component vue-router

【解决方案1】：

问题：

除了转换名称 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>

Revised CodeSandbox

【讨论】：