vue页面切换左右滑动动画

<template>
  <div class="container">
    <!-- <router-link to='/far'>To Far</router-link>
    <router-link to='/user/1'>User1</router-link>
    <router-link to='/user/2'>User2</router-link>
    <p @click="toFar">To Far</p>
    <router-view/> -->
    <!-- <router-view></router-view> -->
    <transition  mode="out-in" :name="transitionName">
      <router-view></router-view>
    </transition>
  </div>
</template>
<style scoped>
  .container{
    background-color: #eeeeee;
    height: 400px;
  }
  .fade-left-enter-active,.fade-right-enter-active{
    transition: all .08 ease
  }
  .fade-left-leave-active, .fade-right-leave-active {
    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0)
  }
  .fade-left-leave-to, .fade-right-enter{
    tra