提示：此坑在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-------------------
<transition :name="direction" >
<router-view class='Router' ></router-view>
</transition>
------------------------------------------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);
}