vue怎么实现左右切换页面

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

clipboard.png
下面是我的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:当前元素先进行过渡,完成之后新元素过渡进入。

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

clipboard.png

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

阅读 8.4k
1 个回答

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题