vue开发移动端项目 过渡动画问题
Posted mr-rshare
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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;
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开发移动端项目 过渡动画问题的主要内容，如果未能解决你的问题，请参考以下文章