首页 > 移动平台 > 详细

vue 移动端,页面左右页面切换效果(切换过程中会出现白屏效果,布吉岛怎么优化,后来就发布前就弃用了)

时间:2018-12-20 19:48:55      阅读:291      评论:0      收藏:0      [点我收藏+]
<transition name="left">
<router-view v-if="getCms" class="Router"/>
</transition>


data() {
names: ‘left‘
}

watch: {
  ‘$route‘(to, from) {
    if (to.index < from.index) {
      this.names = "right"
    } else {
      this.names = "left"
    }
  }
}


.left-enter {
  transform: translateX(100%);
}

.left-enter-to {
  transform: translateX(0);
}

.left-enter-active {
  transition: 1s;
}

.left-leave {
  transform: translateX(0);
}

.left-leave-to {
  transform: translateX(-100%);
}

.left-leave-active {
  transition: .5s;
}

.right-enter {
  transform: translateX(-100%);
}

.right-enter-active {
  transition: .5s;
}

.right-leave-to {
  transform: translateX(100%);
}

.right-leave-active {
  transition: .5s;
}

 

vue 移动端,页面左右页面切换效果(切换过程中会出现白屏效果,布吉岛怎么优化,后来就发布前就弃用了)

原文:https://www.cnblogs.com/1rookie/p/10151719.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!