Javascript 我的vuejs动画/过渡在路径更改方面滞后。
我在我的投资组合中使用vue和vue路由器。我添加了简单的“淡入淡出”动画。我的动画也落后了 我的App.vue组件:Javascript 我的vuejs动画/过渡在路径更改方面滞后。,javascript,css,vue.js,vue-router,Javascript,Css,Vue.js,Vue Router,我在我的投资组合中使用vue和vue路由器。我添加了简单的“淡入淡出”动画。我的动画也落后了 我的App.vue组件: <template> <div id="app"> <Square/> <Navbar/> </div> </template> <template> <div id="square"> <transit
<template>
<div id="app">
<Square/>
<Navbar/>
</div>
</template>
<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'),
},
],
});
我认为这不是因为动画的风格。新内容的渲染速度比旧组件的销毁速度快 VueJS过渡组件有一个很酷的道具,叫做mode。 这将在销毁前一个组件时添加平滑效果
<transition name="fade" mode="out-in">
<!-- ... the buttons ... -->
</transition>