vue的transition-group实现轮播效果

1，需要借助css实现

  <div class="chart-wrapper">

                <transition-group name="slide">

                  <div v-if="show == true " class="chart" key="0">

                  <rotationTable ></rotationTable>

                  </div>

                  <div v-if="show == false " class="chart" key="1">

                  <rotationTable ></rotationTable>

                </div>

                </transition-group>

   </div>

2，css样式

 .chart-wrapper {

    position: relative;

    width: 548px;

    height: 415px;

    .chart {

      width: 548px;

      height: 415px;

      position: absolute;

    }

  }

.slide-enter-active,

  .slide-leave-active {

    transition: all 0.5s;

  }

  .slide-enter {

    opacity: 0;

    transform: translateX(100%);

  }

.slide-leave-active {

    opacity: 0;

    transform: translateX(-100%);

  }

3.这里的show是定时轮询控制显示隐藏的

 showTime() {

      setInterval(() => {

        this.show = !this.show

      }, 10000)

    },

这样就可以实现了简单的轮播了