在Vue使用Velocity.js的时候，第一轮播放没问题，但重新播放第一张的时候，它就不动了

Question

 模块部分

• <template>
      <div class="foucs">
          <transition-group name="swap"
              v-on:before-enter="beforeEnter"
              v-on:enter="enter"
              v-on:leave="leave"
              v-bind:css="false"
          >
              <div class="imgs" v-for="(img,index) in list" v-show="countIndex === index" :key="index" >
                  <img :src="img.path" alt="">
              </div>
          </transition-group>
          <h6 class="left" v-if="isShow" @click="left()">&lt;</h6>
          <h6 class="right" v-if="isShow" @click="right()">&nbsp;&gt;</h6>
          <div class="selet" v-if="isShow">
              <ul>
                  <li v-for="(img,index) in list" :key="index"></li>
              </ul>
          </div>
      </div>
  </template>

• <script>
  import Velocity from 'velocity-animate'
  export default {
      data() {
          return {
              isShow: true,
              timer:"",
              countIndex: 0,
              flag: true,
              list: [
                      {
                          path:require("assets/img/swap/8587.jpg")
                      },
                      {
                          path:require("assets/img/swap/11999.jpg")
                      },
                      // {
                      //     path:require("assets/img/swap/12571.jpg")
                      // },
                      
                   ],
          }
      },
      methods: {
          play(){           
                  this.timer = setInterval(() => {
                  this.countIndex++
                  if(this.countIndex == this.list.length) {this.countIndex = 0}
                  },1000)           
          },
          beforeEnter(el) {
              console.log("beforeEnter被执行");
              Velocity(el, {
                  translateX: 500 + "px"
              }, {
                  duration: 10,
                  // easing: "linear",
                  // complete: done
              });
          },
          enter(el, done) {
              console.log("enter被执行");
              Velocity(el, {
                  translateX: "0px"
              }, {
                  duration: 1000,
                  easing: "linear",
                  complete: done
              })
          },
          leave(el,done) {
              Velocity(el, {
                  translateX: -500 + "px"
              }, {
                  duration: 1000,
                  easing: "linear",
                  complete: ()=>{
                      done();
                      this.flag = true
                  }
              })
          },
          ifShow(){
              this.isShow = !this.isShow
              clearInterval(this.timer)
          },
          left(){
              if(this.flag == true){
                  this.flag = false
                  this.countIndex++
                  if (this.countIndex == this.list.length) {
                      this.countIndex = 0
                  }
              }
              // this.play()
          },
          right(){
              // // this.countIndex--
              // console.log(this.$refs.imgs.ofsetLeft);
          }
      },
      mounted(){
          //   this.enter()
          // this.play()
      }
  }
  </script>

 

• <style>
      * {
          margin: 0;
          padding: 0;
      }
      .foucs {
          /* box-sizing: border-box; */
          position: relative;
          /* display: flex; */
          width: 500px;
          height: 300px;
          background-color: pink;
          margin: 0 auto;
          /* overflow: hidden; */
          border: 10px solid gray;
      }
      
      .imgs img {
          position: absolute;
          width: 500px;
          height: 300px;
          /* justify-content: center; */
      }
  
      .selet {
          display: flex;
          /* display: none; */
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          bottom: 10px;
          /* border: 1px solid black; */
      }
  
      .selet ul li {
          list-style: none;
          float: left;
          width: 30px;
          height: 3px;
          margin: 0px 5px;
          /* padding: 2px; */
          background-color: rgba(255, 255, 255, 0.7);
          /* border: 1px solid white; */
          /* border-radius: 50%; */
      }
  
      .left {
          /* display: none; */
          position: absolute;
          top: 50%;
          left: 0;
          width: 20px;
          height: 30px;
          line-height: 30px;
          transform: translateY(-50%);
          font-size: 16px;
          color: #ccc;
          background-color: rgba(0, 0, 0, .3);
          border-radius: 0px 20px 20px 0px;
          cursor: pointer;
      }
  
      .right {
          /* display: none; */
          position: absolute;
          top: 50%;
          right: 0;
          width: 20px;
          height: 30px;
          line-height: 30px;
          transform: translateY(-50%);
          font-size: 16px;
          color: #ccc;
          background-color: rgba(0, 0, 0, .3);
          border-radius: 20px 0px 0px 20px;
          cursor: pointer;
      }
  </style>

 

Answer 1

可以设置循环，添加loop:true