vue之transition页面跳转动画

页面动画用transition这个api
html:

<template>
  <div id="app">
    <!--<HeadNav></HeadNav>-->
    <div id="main">
      <transition :name="transitionName">
          <router-view></router-view>
      </transition>
    </div>
    <Footsong></Footsong>
    <slider></slider>
    <!--歌曲的操作列表-->
    <Ellipsis></Ellipsis>
    <!--收藏到歌单-->
    <WhichSong></WhichSong>
    <!--等待框-->
    <Loading></Loading>
  </div>
</template>

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+这样就可以观察出来缓动效果出了什么问题
那我这边的问题是：

    <transition :name="transitionName">
          <router-view></router-view>
      </transition>

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

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

单页面html：
直接拿过来用

<template>
  <div class="favorite-list" :style="{'width':this.$store.state.width_s+'px'}">
....
  </div>
</template>

嗯这样就好啦