最近在學(xué)習(xí)vue，準(zhǔn)備用vue-cli寫一個項目練練，仿照到小米手機網(wǎng)站
小米手機官方網(wǎng)站地址：https://m.mi.com/
我想實現(xiàn)點擊下面的導(dǎo)航左右切換頁面，判斷什么都有了就是過渡效果有點問題

下面是我的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"之后沒有了，
但是兩個頁面切換有明顯間隔，我看了下官方文檔發(fā)現(xiàn)：

in-out：新元素先進(jìn)行過渡，完成之后當(dāng)前元素過渡離開。
out-in：當(dāng)前元素先進(jìn)行過渡，完成之后新元素過渡進(jìn)入。

好像沒有同時進(jìn)行過渡的選項
我想實現(xiàn)這樣的效果：

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