我正在练习Vue转换组，并专门在THIS特定部分模仿Vue文档示例。
问题是，我的示例将仅在结束元素上应用动画，而不是正在添加/删除的元素。
有人能解释一下我做错了什么吗(谢谢。
以下是应用程序的链接以获得更多澄清
<style>
<head>
body{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
font-family: 'Nunito', sans-serif;
background-color: #101010;
color: white;
text-align: center;
}
.flex{display:flex;justify-content:center;}
.test-enter{
opacity: 0;
transform: translateY(-20px);
}
.test-enter-to{
opacity: 1;
}
.test-leave-to{
opacity: 0;
transform: translateY(20px);
}
.test-enter-active,
.test-leave-active{
transition: 0.5s ease;
}
</style>
</head>
<body>
<br>
<div id='app'>
<button @click='shuffle'>Shuffle</button>
<button @click='add'>Add</button>
<button @click='remove'>Remove</button>
<br><br>
<transition-group name='test' class='flex'>
<div v-for='(num, ind) in arr' :key='ind' style='border: 1px solid red;'>{{ num }}</div>
</transition-group>
</div>
<script>
let theArray = [1,2,3,4,5,6,7,8];
new Vue({
el: '#app',
data: {
arr: theArray
},
computed: {
arrLength(){
return this.arr.length;
}
},
methods: {
shuffle(){
alert('Not working yet');
},
add(){
// Number from 1 - 9.
let ranNum = Math.floor(Math.random()*9+1);
// Get a random index of current array length.
let ranInd = Math.floor(Math.random()*this.arrLength);
this.arr.splice(ranInd, 0, ranNum);
},
remove(){
let ranInd = Math.floor(Math.random()*this.arrLength);
this.arr.splice(ranInd, 1);
}
}
});
</script>
只需将密钥更改为num而不是ind:
<div v-for='(num, ind) in arr' :key='num' style='border: 1px solid red;'>{{ num }}</div>
因为这允许转换要动画化的数字而不是索引。