Fade in / out не работает в Vue's Router Transition

Question

Проблема:

Я использую маршрутизатор Vue, который правильно переключается с компонента на компонент.Тем не менее, я обернул его внутри <transition name="fade" mode="out=in">, но он не исчезает совсем.

Ожидаемое поведение:

Переключение с компонента на компонент с использованием эффекта затухания.

Повторная ошибка:

Клонировал мой проект в CodeSandbox, ссылки на маршрутизаторы расположены под формами.URL проекта:

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

Очень надеюсь, что кто-нибудь сможет мне помочь.

Answer 1

Проблема:

Все правильно, за исключением того, что имя перехода fade не определено в вашем файле App.vue.

Используемый сторонний фреймворк уже имеет fade правило CSS, которое переопределяет ваше.

Fix:

Изменить имя перехода.

<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>

Пересмотренная CodeSandbox