javascript - Problem beim Routenübergang in Vue?

Question

Vue fügt der Route einen Ein- und Ausblendeffekt für Zwischensequenzen hinzu. Die Komponente wird ausgeblendet, wenn sie entfernt wird. Wenn sie jedoch eingegeben wird, wird sie sofort aktiviert und nicht eingeblendet. Zwischen diesen beiden Schritten wird die Seite angezeigt leer werden. Unten ist mein Code, kopiert von der offiziellen Website:

<template>
  <p id="app">
    <transition name="fade">
      <router-view></router-view>
    </transition>
  </p>
</template>
.fade-enter-active, .fade-leave-active {
  transition: opacity .3s
}
.fade-enter, .fade-leave-active {
  opacity: 0
}


请问要怎么做才可以在当前组件淡出的同时，将要被插入的组件能淡入。

Answer 1

设置mode为out-in

Answer 2

.fade-enter-active, .fade-leave-active {
  opacity: 1;
  transition: opacity .3s
}
.fade-enter, .fade-leave-active {
  opacity: 0
}

或：

.fade-enter-active, .fade-leave-active {
  opacity: 1;
  transition: opacity .3s
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

Answer 3

.fade-enter-active, .fade-leave-active {
opacity: 1;
transition: opacity .3s
}
.fade-enter, .fade-leave {
opacity: 0
}