vue开发移动端项目 过渡动画问题

 App.vue: 

　　<div id="app">

　　　　<div class="content">

　　　　　　<transition :name="transitionName" :duration="{ enter: 500, leave: 0 }">

　　　　　　　　<router-view class="transitionBody"></router-view>

　　　　　　</transition>

　　　　</div>

　　　　<Nav v-if="!hideNav"></Nav>

　　</div>

 

　　css: 

　　　　.transitionBody{

　　　　　　position: absolute;

　　　　　　top: 0;

　　　　　　 100%;

　　　　　　transition: all 0.3s ease; /*定义动画的时间和过渡效果*/

　　　　}

 

　　　　.transitionLeft-enter,

　　　　.transitionRight-leave-active {

　　　　　　-webkit-transform: translate(100%, 0);

　　　　　　transform: translate(100%, 0);

　　　　　　/*当左滑进入右滑进入过渡动画*/

　　　　}

　　　　.transitionLeft-leave-active,

　　　　.transitionRight-enter {

　　　　　　-webkit-transform: translate(-100%, 0);

　　　　　　transform: translate(-100%, 0);

　　　　}

 

　　js判断部分

 

　　　　watch: {

　　　　　　$route (to, from){

　　　　　　　　const arr = ['myFans','forgetPwd','dtIncome', 'jtIncome'];

　　　　　　　　const compare = arr.indexOf(to.name)>arr.indexOf(from.name);

　　　　　　　　this.transitionName = compare ? 'transitionLeft' : 'transitionRight';

　　　　　　}

　　　　},