拼多多排行榜

vue配合animate和Velocity

data(){
  return {
    otherList: [
        {
          order: 4,
          id:1,
          word: "小明1",
          time: "21`15`234",
          src: "@/assets/bg_cjfx.jpg"
        },
        {
          order: 5,
           id:2,
          word: "小明2",
          time: "21`15`234",
          src: "@/assets/bg_cjfx.jpg"
        },
        {
          order: 6,
           id:3,
          word: "小明",
          time: "21`15`234",
          src: "@/assets/bg_cjfx.jpg"
        },
        {
          order: 7,
          id:4,
          word: "小明4",
          time: "21`15`234",
          src: "@/assets/bg_cjfx.jpg"
        },
        {
          order: 8,
          id:5,
          word: "小明5",
          time: "21`15`234",
          src: "@/assets/bg_cjfx.jpg"
        },
        {
          order: 9,
          id:6,
          word: "小明666",
          time: "21`15`234",
          src: "@/assets/bg_cjfx.jpg"
        },
        {
          order: 10,
          id:7,
          word: "小明777",
          time: "21`15`234",
          src: "@/assets/bg_cjfx.jpg"
        }
      ],
      length: "",
      nowIndex: "",
      preIndex: ""
}
    
}

方法

 moveFunc(moveItem) {
      this.length = this.otherList.length;
      this.nowIndex = this.otherList.findIndex(
        item => item.id == moveItem.id
      );
      if (this.nowIndex > -1) {
        this.preIndex = this.nowIndex - 1;
      }
      let nowItem = {};
      let beforeItem = {};
      if (this.nowIndex > -1) {
        beforeItem = this.otherList[this.preIndex];
        nowItem = this.otherList[this.nowIndex];
        this.$set(nowItem,'order',moveItem.order)
        if (nowItem.order <= beforeItem.order) {
         this.$set(beforeItem,'order',beforeItem.order+1)
          nowItem = this.otherList.splice(this.nowIndex, 1)[0];
          this.otherList.splice(this.preIndex, 0, nowItem);
          this.downMoveClass(beforeItem);
          this.upMoveClass(nowItem);
          setTimeout(()=>{
            this.moveFunc(moveItem)
          },400)
        }else {
          return false
        }
      } else {
        this.otherList.splice(this.length, 0, moveItem);
        this.upMoveClass(moveItem);
      }
    },
     downMoveClass(downItem) {
      let str = `ref${downItem.id}`;
      this.$nextTick(() => {
        this.Velocity(
          this.$refs[str][0],
          { opacity: 1 },
          {
            easing: "bounceOut"
          }
        );
        this.$refs[str][0].setAttribute(
          "class",
          "animate__animated animate__fadeInDown"
        );
      });
    },
    upMoveClass(addItem) {
      let str = `ref${addItem.id}`;
      this.$nextTick(() => {
        this.Velocity(
          this.$refs[str][0],
          {
            opacity: 1,
            backgroundColor: "#ccc"
          },
          { easing: "bounceUpIn" }
        );
        this.Velocity(this.$refs[str][0], {
          opacity: 1,
          backgroundColor: "#fff"
        });
        this.$refs[str][0].removeAttribute(
          "class",
          "animate__animated animate__fadeInUp"
        );
        this.$refs[str][0].setAttribute(
          "class",
          "animate__animated animate__fadeInUp"
        );
      });
    },
//启动动画
    this.$refs.actionItem[0].moveFunc({
          order: 4,
          id:7,
          word: "小红666",
          time: "21`15`234",
          src: "@/assets/bg_cjfx.jpg"
        });