javascript - Problème de transition de route dans Vue?

Question

Vue ajoute un effet de fondu d'entrée et de sortie d'animation cinématique à l'itinéraire. Le composant disparaît lorsqu'il est supprimé, mais lorsqu'il est entré, il entre instantanément et n'apparaît pas. Entre ces deux étapes, la page apparaîtra. devenir vide. Ci-dessous mon code, copié du site officiel :

<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

Régler le mode sur sortie-entrée

Answer 2

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

ou :

.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 {
opacité : 1 ;
transition : opacité .3s
}
.fade-enter, .fade-leave {
opacité : 0
}