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"
});
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。