vue图片动画上下跳动_vue中如何实现评论列表上移下移的动画效果？

想实现的效果是，比如点击第二条评论的上移后，第二条评论就会运动到第一条评论的位置，同时第一条评论也会运动到第二条评论的位置。

这个demo之前是用jquery写的，最近学完vue的动画，想用vue来实现一下。但发现vue里的动画貌似都是显示隐藏式的动画。比如点击发表评论或淡入淡出等等。

想过要操作class，但这个demo里的每个li的的不同的top值我是在行间像下面这样设置的，实在想不出来怎么动态操作其改变。

:style='{top:index*35+"px",backgroundColor:bgArr[index]}'

我想知道用vue如何实现点击上移后实现评论的运动。

先附近上我用jquery写的代码供参考：

/*清零开始*/

*{margin: 0;padding: 0;}

body{background-color: #fff;font-size: 13px;color: #333;font-family: "微软雅黑";}

a{text-decoration: none;color: #909090;}

ul{list-style: none;}

ul{

width: 200px;

height: 175px;

margin:0 auto;

border: 3px solid #000;

position: relative;

}

ul li{

margin-bottom: 10px;

border:1px solid #ccc;

position: absolute;

}

ul li span{

margin-right: 60px;

}

• 第一条评论

• 第二条评论

• 第三条评论

• 第四条评论

• 第五条评论

var bgArr = ['skyblue','tomato','YellowGreen','PaleGreen','Darkorange'];

// 给每个li设置不同的背景色

pos();

function pos(){

$.each($('li'), function (index, value){

$(value).css({

top: index * 35,

backgroundColor: bgArr[index % bgArr.length]

})

})

}

var key = true;

// 点击上移按钮，让当前评论(运动到前一条评论的前面+节点插入到前一条评论的前面)

$('li>input[value="上移"]').click(function (){

if(key){

key = false;

var $this = $(this);//解决动画回调里的this指向问题。

var $curLi = $this.parent();//当前评论

var $firstLi = $this.parents('ul').children().first();//第一条评论

var $lastLi = $this.parents('ul').children().last();//最后一条评论

var $prevLi = $this.parent().prev();//前一条评论

var $nextLi = $this.parent().next();//后一条评论

var $otherLis = $this.parent().siblings();

if($prevLi.length != 0){// 当前评论非第一条评论

// 让当前评论运动到前面评论的位置

$curLi.animate({

top: $prevLi.position().top

},function (){

//把当前评论插入到前面那条评论的前面

$prevLi.before($curLi);

key = true;

})

// 让前面评论运动到当前评论的位置

$prevLi.animate({

top: $curLi.position().top

})

}else{// 当前评论为第一条评论

// 当前评论运动到最后

$curLi.animate({

top: $lastLi.position().top

},500,function (){

// 运动结束后，节点位置随之改变

$('ul').append($this.parent());

key = true;

});

// 其他评论向上移一格

$.each($otherLis,function (index,value){

$(value).animate({top:index*35},500);

});

}

}

})

$('li>input[value="下移"]').click(function (){

if(key){

key = false;

var $this = $(this);//解决动画回调里的this指向问题。

var $curLi = $this.parent();//当前评论

var $firstLi = $this.parents('ul').children().first();//第一条评论

var $lastLi = $this.parents('ul').children().last();//最后一条评论

var $prevLi = $this.parent().prev();//前一条评论

var $nextLi = $this.parent().next();//后一条评论

var $otherLis = $this.parent().siblings();

if($nextLi.length != 0){

$curLi.animate({

top: $nextLi.position().top

},function (){

key = true;

$nextLi.after($curLi);

})

$nextLi.animate({

top: $curLi.position().top

})

}else{

// 当前评论运动到最前

$curLi.animate({

top: $firstLi.position().top

},500,function (){

// 运动结束后，节点位置随之改变

$('ul').prepend($curLi);

key = true;

});

// 其他评论向下移一格

$.each($otherLis,function (index,value){

$(value).animate({top:(index+1)*35},500);

});

}

}

})

下面是我用vue对上面的jquery代码改写到一半的代码

/*清零开始*/

*{margin: 0;padding: 0;}

body{background-color: #fff;font-size: 13px;color: #333;font-family: "微软雅黑";}

a{text-decoration: none;color: #909090;}

ul{list-style: none;}

ul{

width: 200px;

height: 175px;

margin:0 auto;

border: 3px solid #000;

position: relative;

}

ul li{

margin-bottom: 10px;

border:1px solid #ccc;

position: absolute;

}

ul li span{margin-right: 60px;}

v-for="(item,index) in textArr"

:key="item.id"

:style='{top:index*35+"px",backgroundColor:bgArr[index]}'

>

{{item.msg}}

var vm = new Vue({

el:"#app",

data:{

textArr:[

{id:1,msg:"第一条评论"},

{id:2,msg:"第二条评论"},

{id:3,msg:"第三条评论"},

{id:4,msg:"第四条评论"},

{id:5,msg:"第五条评论"}

],

bgArr:["skyblue",'tomato','YellowGreen','PaleGreen','Darkorange']

},

methods:{

}

});