码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2018-12-20 20:27:33      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:style   col   移动端   leave   nsf   移动   rom   vue   100%   

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

标签:style   col   移动端   leave   nsf   移动   rom   vue   100%   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!