CSS Animation with Vue.js-CodePudding

I'm learning Vue Js.

Actualy I'm making a chat example application with SCSS and Vue Js.

On my project I've decided to set some CSS animations to the messages box.

Here is the snippet of the animation code:

SCSS:

.push {
    ...
    animation-duration: 0.3s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    
    &.received {
        ...
        animation-name: inFromLeft;
    }

    &.sent {
        ...
        animation-name: inFromRight;
    }
}

@keyframes inFromRight {
    0% {
        right: -100%;
    }
    100% {
        right: 0;
    }
}

@keyframes inFromLeft {
    0% {
        left: -100%;
    }
    100% {
        left: 0;
    }
}

HTML / VUE:

<div id="chat">
    <div v-for="(message, index) in messages" :key="index" class="push" :class="type(message)">
        ...
    </div>
</div>

All the message are stored in the users object in array(s) format. (with vue data).

The problem is that some messages use the animation and some messages not.

I think this problem is related to vue and his method to load array(s).

Here is a dimostration of the final result:

https://www.youtube.com/watch?v=EYsBk4HboD8

Can someone help me to understand the problem and how to fix?

(I prefer use CSS animations and avoid to use the vue transition at the moment).

Thank you!

CodePudding user response：

The problem is in :key="index", changing the key to be unique per-message. should fix the issue

Explanation: Vue tracks every unique element in the loop through keys to avoid removing and re-rendering elements unless they really got changed, setting messages keys as their index makes Vue think that no new element was added if element in index 3 was removed and a new element was added with the same key

read more about this here https://vuejs.org/v2/guide/list.html#Array-Change-Detection