How to properly animate Vue 2 elements?

Question

css

I'm trying to animate routes using

<transition name="fade">
      <div class="content">
        <router-view />
      </div>
      </transition>

the styles themselves

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

Everything is as per the guide, the animation goes only when the route is closed. When you open the page appears immediately

Answer 1

https://ru.vuejs.org/v2/guide/transitions.html#%D0...