Vue введите переход на маршрутизаторе

Question

Я слежу за этим изображением из документов Vue

my html

<transition name="fade">
  <router-view/>
</transition>

и css

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

он исчезает правильно, но мгновенно появляется вместо появления.Почему?

Я создал демонстрационный репозиторий всего с 2 компонентами, шаги для воспроизведения:

• git clone https://github.com/BorysTyminski/vue-transition-issue.git
• cdvue-transition-issue
• npm install
• npm run dev

И демо-кодыanbox: https://codesandbox.io/embed/vue-template-4e4oy

Answer 1

Проблема в том, что оба ваши переходы делятся одновременно.
Это означает, что они оба присутствуют в DOM одновременно.
Это означает, что второй, как и любой хороший старый <div>, будет отображен ниже первого.
Ниже, как в "... далее вниз по странице" .
Если, конечно, он не позиционируется с top:0.

Так что, я думаю, ты пропал ...

#app {
  position: relative;
  > div + div {
    position: absolute;
    top: 0;
  }
}

Смотри .