vue轮播动画效果

本身vue有v-show这个通过改变display:none/block来实现显隐的功能，可以通过定位在同一位置，通过切换index来实现显隐。当然变化过于生硬，通过transition-group实现动画过渡效果，让其显示为左右滑动的效果。

<div>
    <transition-group :name="animationName" tag="ul">
      <li v-for="(item,index) in list" class="nav-item" key="0" v-show="current == index">
        {{item}}
      </li>
    </transition-group>
    <i class="nav_left" @click="changeCur(-1)"><img src="@/assets/arrow_left.png" alt=""></i>
    <i class="nav_right" @click="changeCur(1)"><img src="@/assets/arrow_right.png" alt=""></i>
</div>

export default {
  name: 'home',
  data() {
    return {
      list:[1,2,3]
    }
  },
  methods: {
    changeCur(num) {
      this.animationName = num>0?'right':'left'
      this.current = this.current + num;
      if(this.current >= 3){
        this.current = 0
      }else if(this.current < 0){
        this.current = 2
      }
    }
  },
}
</script>

.left-enter-active,
.right-enter-active {
  transform: translateX(0);
  transition: all 0.6s ease;
}
.left-leave-active {
  transform: translateX(100%);
  transition: all 0.6s ease;
}
.left-enter {
  transform: translateX(-100%);
}
.left-leave,
.right-leave {
  transform: translateX(0);
}
.right-leave-active {
  transform: translateX(-100%);
  transition: all 0.6s ease;
}
.right-enter {
  transform: translateX(100%);
}
.nav-item{
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height:200px;
    color: #fff;
    font-size: 14px;
  }
.arrow_left{
  position: absolute;
  left: 20px;
  top: 67px;
  img{
    width: 16px;
    height: 16px;
  }
}
.arrow_right{
  position: absolute;
  right: 20px;
  top: 67px;
  img{
    width: 16px;
    height: 16px;
  }
}