Vue.js <transition-group> 仅在最后一个元素上应用动画

Question

我正在练习Vue transition-group 并专门在THIS上模仿Vue文档示例 特定部分。

问题是我的示例将仅在结束元素而不是 Added/Removed.

元素上应用动画

有人可以解释一下我做错了什么吗？ :( 谢谢。

Here is link to the app for more clarification

<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>

Answer 1

只需将密钥更改为 num 而不是 ind :

 <div v-for='(num, ind) in arr' :key='num' style='border: 1px solid red;'>{{ num }}</div>

因为这允许转换要动画的数字而不是索引。

Vue.js <transition-group> 仅在最后一个元素上应用动画

Vue.js <transition-group> only applying animation on last element

javascript

vue.js

vue-component

vuejs2

vuejs-transition-group