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

Question

I'm practicing Vue transition-group and imitating Vue document example specifically on THIS particular section.

The problem is that my example will apply animation only on end-element instead of element that's being Added/Removed.

Can someone please explain what I'm doing wrong? :( Thank you.

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

Just change the key to num instead of ind :

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

since this allow the transition which number to animate not the index.

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

Question

1 answers

solution1
4 ACCPTED 2020-08-07 21:12:26

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

Question

1 answers

solution1 4 ACCPTED 2020-08-07 21:12:26

solution1
4 ACCPTED 2020-08-07 21:12:26