<div class="content" :class="{tabar: tabar}">
<transition name="slide-left">
<router-view></router-view>
</transition>
</div>
//渐变动效
.slide-left-enter-active,.slide-left-leave-active{
transition: all .1s ease-in;
opacity:1;
}
.slide-left-enter,.slide-left-leave-active{
opacity:1;
}
//左滑动效
.slide-left-enter-active{
animation: slideLeft .3s;
}
@keyframes slideLeft {
from {
transform: translate3d(100%, 0, 0);
visibility: visible;
}
to {
transform: translete3d(0, 0, 0);
}
}
<template>
<div>
<transition :name="transitionName">
<router-view class="child-view"></router-view>
</transition>
</div>
</template>
<script>
export default {
data () {
return {
transitionName: 'slide-left'
}
},
beforeRouteUpdate (to, from, next) {
let isBacked = this.$router.isBacked
if (isBacked) {
this.transitionName = 'slide-right'
} else {
this.transitionName = 'slide-left'
}
this.$router.isBacked = false
next()
}
}
</script>
<style scoped>
.child-view {
position: absolute;
width:100%;
/*transition: all .8s cubic-bezier(.55,0,.1,1);*/
transition: all .2s linear;
}
.slide-left-enter, .slide-right-leave-active {
opacity: 0;
-webkit-transform: translate(50px, 0);
transform: translate(50px, 0);
/*-webkit-transform: translate3D(0, 0, 0);
transform: translate3D(0, 0, 0);*/
}
.slide-left-leave-active, .slide-right-enter {
opacity: 0;
-webkit-transform: translate(-50px, 0);
transform: translate(-50px, 0);
/*transform: translate3D(100%, 0, 0);*/
}
</style>