通知容器添加子元素时平滑上移动画失效问题求解

问题根源 #

1. innerHTML +=破坏DOM状态：每次添加通知时，innerHTML +=会重新解析并渲染容器内所有元素，原有元素的过渡状态被重置，无法触发平滑动画。
2. 过渡属性未匹配正确变化：主容器#notif的transition未绑定到高度/位置变化属性，且height: auto的自动高度变化无法被CSS过渡捕获。

修复方案 #

1. 修改JavaScript：用appendChild创建元素 #

避免重新渲染原有DOM，保留元素状态以触发过渡：

function doit() {
  const notifcontainer = document.getElementById("notif");
  const title = document.getElementById("title").value;
  const desc = document.getElementById("desc").value;

  if(title.trim() !== "" && desc.trim() !== "") {
    // 创建新通知元素
    const newNotif = document.createElement('div');
    newNotif.className = 'notif';
    newNotif.innerHTML = `
      <h3>${title}</h3>
      <p>${desc}</p>
    `;
    // 添加到容器末尾
    notifcontainer.appendChild(newNotif);
    // 触发重绘后启用过渡
    requestAnimationFrame(() => {
      newNotif.classList.add('show');
    });
  }
}

2. 调整CSS：添加子元素过渡与容器布局优化 #

让新通知淡入，同时容器内现有元素平滑向上移动：

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap');

body {
  display: flex;
  flex-direction: column;
  width: 300px;
}

button { width: fit-content;}

* {
  padding: 0;
  margin: 0;
  font-family: 'Poppins';
}

.notif {
  background: #212121;
  color: white;
  border-radius: 5px;
  padding: 8px 16px;
  margin: 8px 0;
  /* 默认隐藏状态 */
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
}

/* 触发过渡的激活类 */
.notif.show {
  opacity: 1;
  transform: translateY(0);
}

#notif {
  position: absolute;
  left: 50%;
  bottom: 0px;
  width: 300px;
  transform: translateX(-50%);
  /* 用max-height实现高度过渡 */
  max-height: 90vh;
  overflow-y: auto;
  transition: max-height 0.5s ease;
}

3. HTML代码（无需修改） #

<div id="notif">
</div>

<label for="title">Title</label>
<input id="title" name="title" type="text">

<label for="desc">Description</label>
<input id="desc" name="desc" type="text">

<button onclick="doit()">Add</button>

效果说明 #

• 新通知从下方淡入（transform和opacity过渡），同时容器高度平滑扩展，现有通知自动向上移动。
• 原有DOM元素不会被重新渲染，过渡效果稳定触发。

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