what I want to achieve is that after clicking publish, the latest message is displayed at the top and animated (transparency from 0 to 1, height from 0 to 30px). In order to make the message appear at the top, I use this.list.unshift (this.msg) instead of push, but I found that even if the latest message is displayed at the top, the animation happens on the bottom Weibo every time. Could you tell me how to animate the latest message at the top every time? Thank you!
<!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: -sharpfff;font-size: 13px;color: -sharp333;font-family: "";}
ul{list-style: none;}
-sharpmain{
width: 480px;
/*height:270px;*/
padding:10px;
border:1px solid -sharpccc;
margin:50px auto;
}
-sharpmain textarea{
width:100%;
height:150px;
box-sizing:border-box;
display:block;
}
-sharpmain input[type=submit]{margin-top:5px;}
-sharpmain ul{margin:0 auto;width: 400px;}
-sharpmain ul li{
height: 30px;
line-height: 30px;
border-bottom: 1px solid -sharpebebeb;
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:"-sharpmain",
data:{
msg:"",
list:[]
},
methods:{
add:function (){
this.list.unshift(this.msg);
this.msg = "";
}
}
});
</script>
</html>