使用 Vue.js 的 CSS 动画答案

【问题标题】：CSS Animation with Vue.js使用 Vue.js 的 CSS 动画
【发布时间】：2021-11-18 12:28:13
【问题描述】：

我正在学习 Vue Js。

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

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

这里是动画代码的sn-p：

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>

所有消息都以数组格式存储在用户对象中。（带有 vue 数据）。

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

我认为这个问题与 vue 及其加载数组的方法有关。

这是最终结果的演示：

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

谁能帮我理解问题以及如何解决？

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

谢谢！

【问题讨论】：

先试试:class="`push ${type(message)}`"。
我试过这个解决方案：class="push ${type(message)}"，但结果相同。

标签： javascript html css vue.js sass

【解决方案1】：

问题出在:key="index"，将密钥更改为每条消息唯一。应该解决问题

说明：Vue 通过键跟踪循环中的每个唯一元素，以避免删除和重新渲染元素，除非它们真的被改变了，将消息键设置为它们的索引使 Vue 认为如果索引 3 中的元素没有添加新元素删除并使用相同的键添加了一个新元素

在此处了解更多信息https://vuejs.org/v2/guide/list.html#Array-Change-Detection

【讨论】：

我是这样解决的：:key="${currentContact} index";现在它起作用了。谢谢！
当前的联系人+索引仍然可能重复，这取决于您是否从 dom 中删除旧元素，为每条消息拥有唯一 ID 是最好的方法（也不是消息内容，因为您'如果有人发送了两次消息，将得到重复的密钥）
你说得对。但在练习中，他们给了我没有 ID 的消息数组，因此为此我将使用 currentContact + currentMessage 作为唯一 ID。