我的VueJS动画/转换在路径更改上滞后。

<template>
<div id=“app”>
平方英寸/平方英尺;
NavBar/& GT;
&L/DIV & GT;
</template>
< /代码> 

my square.vue component:


<template>
<div id=“square”>
<transition name=“fade”>
<路由器视图></路由器视图>
</transition>
&L/DIV & GT;
</template>
风格& GT;
.fade输入活动,.fade保持活动{
过渡:不透明度0.5s;
}
.fade进入,.fade离开到{
不透明度:0;
}
&风格/风格;
< /代码> 

我的路由文件:


从“vue”导入vue;
从“Vue路由器”导入路由器;
从“./views/hello.vue”导入hello;

使用(路由器);

导出默认新路由器({
路线:
{
路径:“/”
姓名:“你好”,
组件:你好,
}
{
路径:'/i-AM ',
name:'我是',
组件:()=导入(
“./views/about.vue”),
}
{
路径:“/i使用”,
姓名:“我用”,
组件:()=导入(
“./视图/使用.vue”),
}
,
(});
< /代码> 



我认为这不是因为动画的风格。新内容的呈现速度比旧组件的破坏速度快。[答:]

我正在使用Vue和Vue路由器进行投资组合。我添加了简单的“淡入淡出”动画。我的动画也滞后了。

我的app.vue组件:

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


my square.vue组件:

<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>


我的路线文件:

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',
      component: Hello,
    },
    {
      path: '/i-am',
      name: 'I am',
      component: () => import( 
'./views/About.vue'),
    },
    {
      path: '/i-use',
      name: 'I use',
      component: () => import( 
'./views/Using.vue'),
    },
   ],
});




我认为这不是因为动画的风格。新内容的呈现速度比旧组件的破坏速度快。