添加新消息时如何实现聊天div位置重排的平滑上移动画效果

基础实现（现代浏览器兼容，代码量最少） #

你需要的类transition重排动画现在现代浏览器已经原生支持，只需要修改CSS和少量JS逻辑即可：

新增CSS样式 #

/* 消息父容器 */
.messages {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  /* 可选：滚动行为平滑 */
  scroll-behavior: smooth;
}
/* 所有消息气泡通用样式 */
.myMessage, .otherMessage {
  /* 开启所有可动画属性的过渡 */
  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  /* 新增消息初始状态：从下方淡入 */
  opacity: 0;
  transform: translateY(18px);
}
/* 消息激活状态，触发入场动画 */
.myMessage.active, .otherMessage.active {
  opacity: 1;
  transform: translateY(0);
}

修改JS插入逻辑 #

var myMessage = document.createElement("div");
// 注意：id不能重复，建议删掉这行，或者生成唯一id赋值
// myMessage.id = "message";
myMessage.className = "myMessage";
myMessage.textContent = input.value;
messages.appendChild(myMessage);
// 强制浏览器重绘，确保初始状态生效后再触发动画
void myMessage.offsetWidth;
myMessage.classList.add("active");
// 自动滚动到消息底部
messages.scrollTop = messages.scrollHeight;

这个方案的原理是：所有消息元素都开启了过渡属性，新消息插入时从下方滑入，原有消息被新元素撑开向上位移时，浏览器会自动对位移过程做平滑过渡，不会出现突兀的跳变。

降级兼容方案（适配旧浏览器） #

如果需要兼容不支持原生布局过渡的旧版本浏览器，可以用FLIP动画思路实现：

• 插入新消息前，先记录所有已有消息的getBoundingClientRect().top值
• 插入新消息后，计算每个旧消息前后的位置差值
• 给旧消息设置transform: translateY(差值)，然后马上设置transform: translateY(0)并开启过渡，就能实现平滑上移的效果
• 过渡结束后清空临时添加的过渡和transform属性即可

内容的提问来源于stack exchange，提问作者david b