1,模仿微信,每个页面切换的时候会有切换的动画
- 问题:切换的时候中间会有白色的,请问有什么方法呢?
html
<transition :name="transitionName">
<keep-alive>
<router-view v-if="$route.meta.keepAlive && isRouterAlive" class="Router"></router-view>
</keep-alive>
</transition>
<transition :name="transitionName">
<router-view v-if="!$route.meta.keepAlive && isRouterAlive" class="Router"></router-view>
</transition>
使用watch 监听
watch: {
// 使用watch 监听$router的变化
$route (to, from) {
// 如果to索引大于from索引,判断为前进状态,反之则为后退状态
if (to.meta.index < from.meta.index) {
// 设置动画名称
this.transitionName = 'slide-left';
console.log('1111===>', this.transitionName, to.meta.index, from.meta.index);
} else if (to.meta.index > from.meta.index) {
this.transitionName = 'slide-right';
console.log('22222===>', this.transitionName, to.meta.index, from.meta.index);
} else {
this.transitionName = ''
}
}
},
CSS动画
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
will-change: transform;
transition: all 300ms;
// position: absolute; //这里的定位使用relative可以解决切换时页面残影
position: relative; //这里的定位使用relative可以解决切换时页面残影
}
.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);
}
请问你的项目在ios真机上这种转场动画效果如何呀?我的在安卓上还可以,但是在ios效果不尽人意