我的 vuejs 动画/过渡滞后于路径更改。

Posted 2023-02-22

【中文标题】我的 vuejs 动画/过渡滞后于路径更改。

【英文标题】：My vuejs animation/transition is lagging on path change.

【发布时间】：2019-04-19 04:39:50

【问题描述】：

我正在为我的投资组合使用 vue 和 vue-router。我添加了简单的“淡入淡出”动画。而且我的动画是滞后的。

我的 App.vue 组件：

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

我的 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'),
    ,
   ],
);

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

【参考方案1】：

VueJS 过渡组件有一个很酷的道具，叫做模式。 这将在销毁前一个组件时添加平滑效果。

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

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