vue的transition-group实现轮播效果

1，需要借助css实现

  

                

                  

                  

                  

                  

                  

                

                

   

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)

    },

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