vue開發移動端項目 過渡動畫問題
阿新 • • 發佈：2019-01-02
效果 ati for idt 過渡效 wid 開發 duration ide 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;
width: 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‘;
}
},
vue開發移動端項目 過渡動畫問題