I am using vue and vue-router for my portfolio. I added simple "fade" animation. And my animation is lagging.

My App.vue ponent:

<template>
    <div id="app">
        <Square/>
        <Navbar/>
    </div>
</template>

My Square.vue ponent:

<template>
    <div id="square">
        <transition name="fade">
            <router-view></router-view>
        </transition>
    </div>
</template>
<style>
    .fade-enter-active, .fade-leave-active {
      transition: opacity 0.5s;
    }
    .fade-enter, .fade-leave-to{
      opacity: 0;
    }
 </style>

My routes file:

import Vue from 'vue';
import Router from 'vue-router';
import Hello from './views/Hello.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'hello',
      ponent: Hello,
    },
    {
      path: '/i-am',
      name: 'I am',
      ponent: () => import( 
'./views/About.vue'),
    },
    {
      path: '/i-use',
      name: 'I use',
      ponent: () => import( 
'./views/Using.vue'),
    },
   ],
});

And I think it is not because of the style of animation. New content renders faster than old ponent destroys.

I am using vue and vue-router for my portfolio. I added simple "fade" animation. And my animation is lagging.

My App.vue ponent:

<template>
    <div id="app">
        <Square/>
        <Navbar/>
    </div>
</template>

My Square.vue ponent:

<template>
    <div id="square">
        <transition name="fade">
            <router-view></router-view>
        </transition>
    </div>
</template>
<style>
    .fade-enter-active, .fade-leave-active {
      transition: opacity 0.5s;
    }
    .fade-enter, .fade-leave-to{
      opacity: 0;
    }
 </style>

My routes file:

import Vue from 'vue';
import Router from 'vue-router';
import Hello from './views/Hello.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'hello',
      ponent: Hello,
    },
    {
      path: '/i-am',
      name: 'I am',
      ponent: () => import( 
'./views/About.vue'),
    },
    {
      path: '/i-use',
      name: 'I use',
      ponent: () => import( 
'./views/Using.vue'),
    },
   ],
});

And I think it is not because of the style of animation. New content renders faster than old ponent destroys.

• javascript
• css
• vue.js
• vue-router

1 Answer 1

VueJS Transition Component has this cool props called mode. This will add a smooth effect upon destroying the previous ponent.

<transition name="fade" mode="out-in">
  <!-- ... the buttons ... -->
</transition>

https://v2.vuejs/v2/guide/transitions.html#Transition-Modes