极客观点
项目管理
HarmonyOS
我想实现的效果是点击发表后，最新的留言在最上面显示并且带动画效果(透明度从0到1，高度由0到30px)。为了让留言在最上面显示，我是用的this.list.unshift(this.msg)而不push,但却发现，即使最新留言在最上面显示了，动画效果却每次都是在最下面的那条微博上发生。请问如何实现每次都是让最上方的最新留言有动画效果？谢谢！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<style>
*{margin: 0;padding: 0;}
body{background-color: #fff;font-size: 13px;color: #333;font-family: "微软雅黑";}
ul{list-style: none;}
#main{
width: 480px;
/*height:270px;*/
padding:10px;
border:1px solid #ccc;
margin:50px auto;
}
#main textarea{
width:100%;
height:150px;
box-sizing:border-box;
display:block;
}
#main input[type=submit]{margin-top:5px;}
#main ul{margin:0 auto;width: 400px;}
#main ul li{
height: 30px;
line-height: 30px;
border-bottom: 1px solid #ebebeb;
color:red;
position: relative;
}
.v-enter,.v-leave-to{height:0;opacity:0;}
.v-enter-active,.v-leave-active{
transition:all 2s ease;
}
</style>
</head>
<body>
<div id="main">
发表评论:<br>
<textarea v-model="msg"></textarea>
<input type="submit" value="发表" @click="add">
<ul>
<transition-group>
<li v-for="(item,index) in list" :key="index">{{item}}</li>
</transition>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el:"#main",
data:{
msg:"",
list:[]
},
methods:{
add:function (){
this.list.unshift(this.msg);
this.msg = '';
}
}
});
</script>
</html>