路由动画
来源:10-6 Vue项目的联调测试上线 - 课程总结与后续学习指南
你畏时光不久
2019-06-15
老师, 因为您没有讲到切换路由时的动画 , 我自行百度做了下。路由动画实现了,但是还是有一些小问题,当mode="in-out"的时候,页面切换时会出现两个页面的重叠,进入动画比较流畅,但返回动画却有一些延迟,点了要等一会儿会儿才会响应,搞不明白了唉
<template>
<div id="app">
<transition
:name="transitionName"
mode="in-out"
>
<keep-alive exclude="Details">
<router-view class="child-view"></router-view>
</keep-alive>
</transition>
</div>
</template>
<script>
export default {
name: "app",
data() {
return {
transitionName: "slide-left"
};
},
watch: {
$route(to, from) {
const toDepth = to.path.split("/").length;
const fromDepth = from.path.split("/").length;
this.transitionName = toDepth < fromDepth ? "slide-right" : "slide-left";
}
}
};
</script>
<style scoped>
.child-view {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
transition: all 0.6s cubic-bezier(0.55, 0, 0.1, 1);
}
.slide-left-enter,
.slide-right-leave-active {
opacity: 0;
-webkit-transform: translate(-80px, 0);
transform: translate(-80px, 0);
}
.slide-left-leave-active,
.slide-right-enter {
opacity: 0;
-webkit-transform: translate(100%, 0);
transform: translate(100%, 0);
}
</style>
写回答
2回答
-
Dell
2019-06-16
我之前遇到过,但是方案记不得了,你看下,找不到我来帮你解决
022019-06-17 -
Dell
2019-06-16
确实有这个问题,但网上有很多这个问题的解决方案,你搜索一下就可以啦,一定有的。
00
相似问题