vue+vue-router转场动画的实例代码

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' } }}

<transition :name="transitionName"> <router-view class="child-view"></router-view></transition>

 .child-view { position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  -moz-box-sizing: border-box;    box-sizing: border-box; transition: all .6s cubic-bezier(.55,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);}

<transition name="slide-fade"> <router-view></router-view></transition>

.slide-fade-enter-active { transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease;}.slide-fade-leave-active { transition: all .5s ease; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease;}.slide-fade-enter{ transform: translateX(20px); -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); opacity: 0;}.slide-fade-leave-active { opacity: 0;}