CSS Animation with Vue.js

Question

我正在学习Vue Js。

实际上我正在用SCSS和Vue Js制作一个聊天示例应用程序。

在我的项目中，我决定为消息框设置一些CSS动画。

下面是动画代码的片段:

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>

所有消息都以数组格式存储在users对象中。(与vue数据).

问题是有些消息使用动画，而有些消息没有。

我认为这个问题与value和他加载数组的方法有关。

下面是最终结果的演示:

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

有人能帮我理解这个问题和如何解决吗?

(我更喜欢使用CSS动画，目前避免使用vue过渡)。

谢谢!

Answer 1

问题是在:key="index"中，将每个消息的密钥更改为唯一。应该修复这个问题

解释:Vue通过键来跟踪循环中的每个唯一元素，以避免删除和重新呈现元素，除非它们真的发生了变化，将消息键设置为它们的索引使Vue认为如果索引3中的元素被删除并且使用相同的键添加了一个新元素

在这里阅读更多内容https://v2.vuejs.org/v2/guide/list.html#Array-Change-Detection