vue配合animate和Velocitydata(){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:"Xiaoming4",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.长度;this.nowIndex=this.otherList.findIndex(item=>item.id==moveItem.id);如果(this.nowIndex>-1){this.preIndex=this.nowIndex-1;}让nowItem={};让beforeItem={};如果(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{returnfalse}}else{this.otherList.splice(this.length,0,moveItem);this.upMoveClass(moveItem);}},downMoveClass(downItem){letstr=`ref${downItem.id}`;this.$nextTick(()=>{this.Velocity(this.$refs[str][0],{opacity:1},{easing:"bounceOut"});this.$refs[str][0].setAttribute("class","animate__animatedanimate__fadeInDown");});},upMoveClass(addItem){letstr=`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__animatedanimate__fadeInUp");this.$refs[str][0].setAttribute("class","animate__animatedanimate__fadeInUp");});},//启动动画this.$refs.actionItem[0].moveFunc({order:4,id:7,word:"小红666",time:"21`15`234",src:"@/资产/bg_cjfx.jpg"});
