css3 渐变效果，左滑效果

<div class="content" :class="{tabar: tabar}">
<transition name="slide-left">
   <router-view></router-view>
</transition>
</div>

//渐变动效
.slide-left-enter-active,.slide-left-leave-active{
transition: all .1s ease-in;
opacity:1;  
}
.slide-left-enter,.slide-left-leave-active{
    opacity:1;
}

//左滑动效
.slide-left-enter-active{
  animation: slideLeft .3s;
}

@keyframes slideLeft {
from {
transform: translate3d(100%, 0, 0);
visibility: visible;
}
to {
  transform: translete3d(0, 0, 0);
}
}

<template>
  <div>
    <transition :name="transitionName">
      <router-view class="child-view"></router-view>
    </transition>
  </div>
</template>


<script>
  export default {
    data () {
      return {
        transitionName: 'slide-left'
      }
    },
    beforeRouteUpdate (to, from, next) {
      let isBacked = this.$router.isBacked
      if (isBacked) {
        this.transitionName = 'slide-right'
      } else {
        this.transitionName = 'slide-left'
      }
      this.$router.isBacked = false
      next()
    }
  }
</script>


<style scoped>
  .child-view {
    position: absolute;
    width:100%;
    /*transition: all .8s cubic-bezier(.55,0,.1,1);*/
    transition: all .2s linear;
  }
  .slide-left-enter, .slide-right-leave-active {
    opacity: 0;
    -webkit-transform: translate(50px, 0);
    transform: translate(50px, 0);
    /*-webkit-transform: translate3D(0, 0, 0);
    transform: translate3D(0, 0, 0);*/
  }
  .slide-left-leave-active, .slide-right-enter {
    opacity: 0;
    -webkit-transform: translate(-50px, 0);
    transform: translate(-50px, 0);
    /*transform: translate3D(100%, 0, 0);*/
  }
</style>