最近在学习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也可以,小弟感激不尽!
为啥没有同时切换呢?因为不加mode的时候就是同时切换。
你可以把过渡写的慢慢慢慢点,看看。
出现留白的原因是,新加入的组件"div"会把原有的dom结构挤下去,所以我原来写切换的时候在过渡里加了
来避免这种情况,你可以先试试看行不行