如何实现添加/删除列表项时容器div高度平滑过渡？

核心思路 #

CSS 无法直接对 height:auto 实现过渡动画，因此我们改用 max-height 模拟高度变化，配合 opacity 控制容器的显示/隐藏，同时为列表项添加过渡效果，实现平滑的高度增减。

修改后的 CSS 代码 #

.search_results_container{
  /* 替换 display:none，用 opacity 和 max-height 控制隐藏 */
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  border: 4px solid #FFF;
  margin: 40px auto 25px;
  box-sizing: border-box;
  border-radius: 21px;
  max-width: 850px;
  width: auto;
  /* 添加过渡动画 */
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

/* 显示容器的类 */
.search_results_container.active{
  opacity: 1;
  /* 设置一个足够大的 max-height 覆盖所有可能的内容高度 */
  max-height: 2000px;
}

.search_results{
 width:100%;
}

.added_list{
  width:100%;
  list-style-type:none;
  padding: 0;
  margin: 0;
  /* 给列表添加过渡 */
  transition: max-height 0.3s ease;
}

/* 给列表项添加过渡，实现单个项的平滑出现/消失 */
.added_list li{
  padding: 10px;
  background: #f0f0f0;
  margin-bottom: 5px;
  border-radius: 8px;
  /* 初始隐藏列表项 */
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

/* 列表项显示的类 */
.added_list li.active{
  opacity: 1;
  max-height: 60px; /* 根据项的实际高度调整 */
}

对应的 JS 调整 #

1. 显示容器时，不再直接设置 display:block，而是添加 active 类：

// 示例：显示容器
document.querySelector('.search_results_container').classList.add('active');

2. 添加列表项时，先把 li 元素添加到 ol 中，再为其添加 active 类触发动画：

// 示例：添加列表项
const li = document.createElement('li');
li.textContent = '新的列表项';
document.getElementById('added_list').appendChild(li);
// 延迟添加类（确保DOM已更新）
setTimeout(() => {
  li.classList.add('active');
}, 10);

3. 删除列表项时，先移除 active 类，等动画结束后再移除元素：

// 示例：删除列表项
const liToRemove = document.querySelector('.added_list li');
liToRemove.classList.remove('active');
// 监听过渡结束事件，再移除元素
liToRemove.addEventListener('transitionend', () => {
  liToRemove.remove();
  // 如果列表为空，隐藏容器
  if(document.querySelectorAll('.added_list li').length === 0){
    document.querySelector('.search_results_container').classList.remove('active');
  }
}, { once: true });

关键说明 #

• 用 max-height 替代 height:auto 是因为 CSS 过渡只支持具体数值，auto 无法被计算过渡值。设置足够大的 max-height 可以确保容器能完全展开所有内容。
• 列表项的过渡可以让单个项的出现/消失更平滑，避免容器高度突变。
• 避免直接使用 display:none，因为它会中断过渡动画，改用 opacity 和 max-height 组合可以保留过渡效果。

内容的提问来源于stack exchange，提问作者Sampat Lal Aheer