CSS 滚动效果

<div :style="{transition: swiperTransition,transform:`translate(0,${swiperTranslate}px)`}"</div>

data () {
  return {
     list: [],
     swiperTransition: "",
     swiperTranslate: "0",
  }
}

methods: {
    Rotation() {
      if(this.list&&this.list.length&&this.list.length>1) {
        this.mouseenter()
        this.playAnimation = setInterval(() => {
          this.swiperTransition = 'all 2s'
          this.swiperTranslate = '-33'
          setTimeout(() => {
            this.$nextTick(() => {
              let obj = this.list.shift() // shift直接删除元数组第一项
              this.list.push(obj)
              this.swiperTransition = 'none'
              this.swiperTranslate = '0'
            })
          }, 2000)
        }, 5000)
      }
    },
 clearTime() {
    clearInterval(this.playAnimation)
    this.playAnimation = null
 },
mouseenter() {
  if(this.playAnimation) {
    clearInterval(this.playAnimation)
    this.playAnimation = null
  }
},
mouseleave() {
  this.Rotation()
},
},
beforeDestroy() {
    this.clearTime()
},