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;