vue之transition页面跳转动画

页面动画用transition这个api
html:

js:

export default {
  name: 'App',
  data(){
    return{
      transitionName:''
    }
  },
  components:{
   Footsong,Slider,Ellipsis,WhichSong,Loading
  },
  watch: {
    '$route' (to, from) {
      const toDepth = to.path.split('/').length;
      const fromDepth = from.path.split('/').length;
      this.transitionName = toDepth < fromDepth ? 'slide-left' : 'slide-right';
    }
  }
}

css:

 .slide-right-enter-active,
  .slide-right-leave-active,
  .slide-left-enter-active,
  .slide-left-leave-active {
    will-change: transform;
    transition: all .5s;
    position: absolute;
  }
  .slide-right-enter {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
  .slide-right-leave-active {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  .slide-left-enter {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  .slide-left-leave-active {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

因为我的组件页面不是很单一，所以效果是有但是要么卡顿，要么切换的很快，用户体验太差。此时你可以把缓动的 transition: all .5s;变成10s+这样就可以观察出来缓动效果出了什么问题
那我这边的问题是：

每个包含的单页面因为没有固定宽度，所以缓动的时候页面宽度就像脱缰的野马。。单页面加个固定宽就好了
屏幕宽写在store/index里面

const store = new Vuex.Store({
  state:{
    width_s:document.documentElement.clientWidth
  }
})

单页面html：
直接拿过来用

嗯这样就好啦