vue 实现页面左右切换效果踩坑
提示：此坑在css中
实现效果：全局app不实现页面左右切换动画。只有某个板块进入以后实现该效果
问题重现： 进入板块以后首次进入会出现两个页面打搅的现象
代码如下：
由于只是某一模块采用动画。所以采用了嵌套路由方式 ：以下home ，question，submit都位于answer这个路由之下，
answer页面承接了一个router-view容器
-------------------------------路由---------------------------------
{
path: '/answer',
name: 'answer',
redirect:"/answer/home",
component: ()=>import('../views/Answer/answer.vue'),
children:[
{
path: 'home', //分类
name: 'home',
component: ()=>import('../views/Answer/home.vue'),
},
{
path: 'question', //分类
name: 'question',
component: ()=>import('../views/Answer/question.vue'),
},
{
path: 'submit', //分类
name: 'submit',
component: ()=>import('../views/Answer/submit.vue'),
}
]
},
answer页面：
-----------------------------------------html-------------------
------------------------------------------js--------------------
export default {
name:'answer',
components:{},
computed: {
direction() {
const viewDir = this.$store.state.direction;
let tranName = "";
if (viewDir === "left") {
tranName = "slide-left";
} else if (viewDir === "right") {
tranName = "slide-right";
}
return tranName;
}
},
------------------css-------------------
.slide-left-enter,
.slide-right-leave-active {
opacity: 0;
-webkit-transform: translateX(100%, 0);
transform: translate(100%, 0);
}
.slide-left-leave-active,
.slide-right-enter {
opacity: 0;
-webkit-transform: translate(-100%, 0);
transform: translate(-100%, 0);
}
全局vuex：
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
const store=new Vuex.Store({
state:{
direction:"right"
},
mutations:{
setAnimationDirection(state,payload){
state.direction=payload
}
}
})
export default store
-------------------全局路由守卫----------------------
const router = new Router({
routes
})
let arr = routes.filter(item=>item.name =='answer')
console.log("arr.children:",arr)
let list=[]
list=arr[0].children.map(item=>item.name)
router.beforeEach((to,from,next)=>{
console.log("this.$store.state.direction:",store.state)
//处理全局页面切换动画
let toName = to.name
let fromName = from.name
let toIndex = list.indexOf(toName)
let fromIndex = list.indexOf(fromName)
let direction = 'left'
if (toIndex > -1 && fromIndex > -1) {
if (toIndex < fromIndex) {
direction = 'right'
} else {
direction = 'left'
}
}
store.commit('setAnimationDirection', direction)
next()
})
export default router
如果代码写到这里。就会最开始提到的问题。首次进入的时候。会出现两个页面打搅。前一个页面先出现一部分然后顶上去，然后再消失最后下一个页面出来的诡异现象。
解决办法：
修改answer.vue下的css
.Router {
width: 100%;
position:relative //给router-view容器添加一个相对定位
}
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
will-change: transform;
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
position: absolute; //给子页面添加一个绝对定位
}
.slide-right-enter {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}