页面切换translate()动画

标签包裹

<transition>
    <router-view></router-view>
</transition>

设置transition动画

<style scoped>
   .contenBox{
      color: red;
      padding-top: 40px;
      overflow: hidden;       
    
    }

    .v-enter{
        opacity: 0;
        transform: translateX(100%);
    
    }
    .v-leave-to{
        opacity: 0;
        transform: translateX(-100%);
        position: absolute;
    }

    .v-enter-active,
    .v-leave-active{
        transition: all 0.5s ease;
    }
<style >

解释：

• .contenBox： overflow: hidden; 等带进入的页面未万群进入之前选择隐藏，防止出现滚动条
• transform: translateX(100%); 页面从右边进入，横向切换，占屏100%适应性高
• .v-leave-to
  transform: translateX(-100%); 页面左边消失
  position: absolute; 绝对占用时，页面切离不占用位置，进入的页面不会被挤占位置出现抖动