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

Posted 2021-01-28 1rookie

<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;
}