vue切换路由时的动画效果（简单）滑动进入

代码很简单注意你的路由层次就行

我想在红圈位置 切换时加入动画

我的app.vue

<template><div id="app"><!-- 路由出口 --><router-view/></div></template>

我的router.js

我用了3级路由

{path: '/',component: Layout,children: [{path: '//audit',component: Audit},{path: '//recheck',component: Recheck},{path: '//home',component: Home},

路由这这样嵌套的

app.vue–>layout.vue–>audit.vue

在 layout.vue中加入代码即可 你哪里需要动效 在它外层加

<!-- 二级路由的出口 --><transition name="transitionRouter" mode="out-in"><router-view ></router-view></transition>.transitionRouter-enter-active, .transitionRouter-leave-active {transition: all 0.4s;} .transitionRouter-enter, .transitionRouter-leave{transform: translate3d(100%, 0, 0);}

复制就能跑~~~ 作者开始一直在app.vue里操作 导致一直没有效果

避免大家踩坑