关于vue.js:拼多多排行榜

vue 配合 animate

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.order}`;
      this.$nextTick(() => {this.$refs[str][0].setAttribute(
          "class",
          "animate__animated animate__fadeInDown"
        );
      });
    },
    upMoveClass(addItem) {let str = `ref${addItem.order}`;
      this.$nextTick(() => {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"
        });