Vue transition animation does not play but keeps its animation duration

Question

I want to create a simple fade transition for my Vue routes and followed the docs from here. Somehow the animations never play but the new content appears immediately. I tried to reproduce it with a fresh project:

Create a Vue2 project using the Vue router package with the Vue CLI
Modify the App.vue file to

.

<template>
  <div id="app">
    <div>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <transition name="fade">
      <router-view :key="$route.path" />
    </transition>
  </div>
</template>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 2s;
}

.fade-enter,
.fade-leave-to {
  transition: opacity 0;
}
</style>

run the app
navigate by clicking the links in the navbar

This is a screenshot after clicking on the "About" route in the navbar

As you can see the content from the "Home" route does not fade out. It just disappears immediately after 2 seconds (value in CSS class). And the content from the "About" route does not fade in, it just appears immediately.

What am I missing?

I tried to create a reproducable fiddle to play around with

https://jsfiddle.net/jwuyathp/2/

Navigate around and you will see there is no fade animation.

If you can recreate this in jsfiddle or something that might help. At first glance it "should" work. — Matti Price

Olaf Svenson Olaf Svenson · Accepted Answer · 2020-10-06T12:02:15

Based on @RoToRa's solution you have to change this

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

to this

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

Further you have to add mode="out-in" as an attribute to your <transition> tag.

This is the fixed version

https://jsfiddle.net/y1kr0g3w/

const One = {
  template: '<div>Home</div>'
}
const Two = {
  template: '<div>Foo</div>'
}

const router = new VueRouter({
  mode: 'history',
  routes: [{
      path: '/',
      component: One
    },
    {
      path: '/2',
      component: Two
    }
  ]
})

new Vue({
  router,
  el: '#app'
})

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

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

<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <router-link to="/">page1</router-link> |
  <router-link to="/2">page2</router-link>
  <transition name="fade" mode="out-in">
    <router-view :key="$route.path" />
  </transition>
</div>

Vue transition animation does not play but keeps its animation duration

3 Answers