vue怎么实现左右切换页面

Question

最近在学习vue，准备用vue-cli写一个项目练练，仿照到小米手机网站
小米手机官方网站地址：https://m.mi.com/
我想实现点击下面的导航左右切换页面，判断什么都有了就是过渡效果有点问题

下面是我的app.vue

<template>
    <div id="app">
        <transition :name="moveName" mode="out-in">
            <router-view></router-view>
        </transition>
        <v-footer></v-footer>
    </div>
</template>
<script>
    import footer from './components/footer';
    export default {
        name: 'App',
        data(){
            return{
                moveName:'',
            }
        },
        components:{
            'v-footer':footer
        },
        watch: {
            '$route' (to, from){
                if(to.meta.index<from.meta.index){
                    this.moveName='move-right';
                }else{
                    this.moveName='move-left';
                }
                console.log(this.moveName);
            },

        }
    }
</script>
<style>
    *{
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
    html,body,#app{
        width: 100%;
        height: 100%;
    }
    #app{
        font-family: "Microsoft YaHei", Arial, sans-serif;
        font-size: 0.16rem;
        width: 6.4rem;
        margin: 0 auto;
    }
    a:link,a:visited,a:active,a:hover{
        text-decoration: none;
    }
    .move-left-enter {
        transform: translate(100%);
    }
    .move-left-enter-active {
        transition: all 0.2s ease;
    }
    .move-left-leave-active {
        transform: translate(-100%);
        transition: all  0.2s ease;
    }
    .move-right-enter {
        transform: translate(-100%);
    }
    .move-right-enter-active {
        transition: all 0.2s ease;
    }
    .move-right-leave-active {
        transform: translate(100%);
        transition: all  0.2s ease;
    }
</style>

这个是index.js

import Vue from 'vue'
import Router from 'vue-router'
import index from '@/views/index'
import goods from '@/views/goods'

Vue.use(Router)

export default new Router({
    mode:'history',
    routes: [
        {
            path: '/',
            name: 'index',
            component: index,
            meta:{index:1}
        },
        {
            path: '/goods',
            name: 'goods',
            component: goods,
            meta:{index:2}
        }
    ]
});

最开始的时候切换页面顶部有空白，加入 mode="out-in"之后没有了，
但是两个页面切换有明显间隔，我看了下官方文档发现：

in-out：新元素先进行过渡，完成之后当前元素过渡离开。
out-in：当前元素先进行过渡，完成之后新元素过渡进入。

好像没有同时进行过渡的选项
我想实现这样的效果：

哪位大佬解答下或者有demo也可以，小弟感激不尽！

Answer 1

为啥没有同时切换呢？因为不加mode的时候就是同时切换。
你可以把过渡写的慢慢慢慢点，看看。
出现留白的原因是，新加入的组件"div"会把原有的dom结构挤下去，所以我原来写切换的时候在过渡里加了

position: absolute;
top:0;
left:0;

来避免这种情况，你可以先试试看行不行