Я что-то пропустил для Vue-переходов?

Question

Я пытаюсь выполнить переход между моими компонентами в Vue, это мой код:

<template>
  <div id="app">
    <router-link to="/">Go to home</router-link>
    <router-link to="Register">Go to register</router-link>
    <transition name="fade">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style scoped>
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
}

Однако переход не работает вообще.Он корректно переключается с компонента на компонент, но без перехода.

Я прочитал документы Vue и Vue Router, и, насколько я знаю, я делаю именно то, что говорят документы.Кто-нибудь знает, что я пропускаю или делаю неправильно?

Answer 1

Что-то определяет классы .fade-enter и .fade-appear.Это может произойти, если у вас есть ссылка, которая вызывает отладчик после одного тика и проверяет примененный стиль:

stopThings () {
  this.$router.push({
    name: 'Login'
  });

  this.$nextTick(() => {
    debugger;
  });
}

Поскольку исходное состояние неверно, переход ничего не делает.

Переименуйте ваш переход и ваши классы перехода в буквальном смысле во что-нибудь еще, например, myfade, и ваш переход работает как положено.

Answer 2

Переходы, насколько я вижу из общего кода, выглядят нормально.Возможно, что переходы происходят вне поля зрения.Во время перехода оба элемента видны

. Вот пример добавления оболочки с относительным и абсолютным позиционированием

<template>
  <div id="app">
    <router-link to="/">Go to home</router-link>
    <router-link to="Register">Go to register</router-link>
    <div class="content">
      <transition name="fade">
        <router-view></router-view>
      </transition>
    </div>
  </div>
</template>

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

<style scoped>
.content {
  position: relative;
}
.content > * {
  position: absolute;
  top: 0;
  left: 0;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>