平滑实现动态内容容器高度过渡效果

.search_results_container {
  /* 初始状态：高度为0，隐藏内容 */
  height: 0; 
  overflow: hidden; /* 隐藏溢出内容 */
  transition: height 0.3s ease-in-out; /* 定义高度过渡效果 */

  /* 其他样式保持不变 */
  border: 4px solid #FFF;
  margin: 40px auto 25px;
  box-sizing: border-box;
  border-radius: 21px;
  max-width: 850px;
  width: auto;
}

.search_results {
  width: 100%;
}

.added_list {
  width: 100%;
  list-style-type: none;
  /* 确保列表本身不影响容器的初始高度计算 */
  padding: 0; 
  margin: 0;
}

/* 当容器有内容时，为其设置一个有效的高度 */
.search_results_container.active {
  /* 这个高度将在JS中动态设置 */
}

// 建议：将常用的DOM元素查询结果存储在变量中，提高代码可读性和性能
const searchResultsContainer = document.querySelector('.search_results_container');
const addedList = document.getElementById('added_list');

/**
 * 辅助函数：简化DOM元素查询
 * @param {string} selector CSS选择器字符串
 * @returns {Element | null} 匹配的DOM元素
 */
function _(selector) {
  return document.querySelector(selector);
}

// 示例：假设我们有一个按钮来触发添加列表项
const addButton = _('#add-item-button'); // 假设页面上有一个ID为'add-item-button'的按钮

// 示例：添加列表项的函数
function addListItem(itemText) {
  const listItem = document.createElement('li');
  listItem.textContent = itemText;
  addedList.appendChild(listItem);
  updateContainerHeight(); // 更新容器高度
}

// 示例：删除列表项的函数（需要额外的逻辑来确定删除哪个项）
function removeListItem(listItemElement) {
  if (listItemElement && addedList.contains(listItemElement)) {
    addedList.removeChild(listItemElement);
    updateContainerHeight(); // 更新容器高度
  }
}

/**
 * 更新容器高度的函数
 * 该函数会在内容变化后被调用，以确保容器高度与内容匹配
 */
function updateContainerHeight() {
  // 1. 临时移除高度限制，让浏览器计算出内容的真实高度
  searchResultsContainer.style.height = 'auto';
  // 2. 获取第一个子元素的实际高度（这里是 .search_results div）
  // 注意：如果 .search_results_container 直接包含 .added_list，则应获取 .added_list 的 clientHeight
  // 根据提供的HTML结构，.search_results_container 的第一个子元素是 .search_results
  const contentHeight = searchResultsContainer.children[0].clientHeight; 

  // 3. 将计算出的高度设置回容器
  searchResultsContainer.style.height = contentHeight + 'px';

  // 4. 如果列表为空，则将容器高度设为0，使其收起
  if (addedList.children.length === 0) {
    searchResultsContainer.style.height = '0px';
  }
}

// 初始加载时，如果容器内已有内容，也需要更新一次高度
window.addEventListener('load', () => {
  updateContainerHeight();
});

// 示例用法：
addButton.addEventListener('click', () => {
  addListItem(`新添加的列表项 ${Date.now()}`);
});

// 假设每个列表项都有一个删除按钮，或者点击列表项本身可以删除
addedList.addEventListener('click', (event) => {
  if (event.target.tagName === 'LI') {
    removeListItem(event.target);
  }
});

.search_results_container {
  max-height: 0; /* 初始状态：最大高度为0，隐藏内容 */
  overflow: hidden;
  transition: max-height 0.5s ease-in-out; /* 过渡 max-height */

  /* 其他样式 */
  border: 4px solid #FFF;
  margin: 40px auto 25px;
  box-sizing: border-box;
  border-radius: 21px;
  max-width: 850px;
  width: auto;
  height: auto; /* 保持 height 为 auto，让内容决定高度 */
}

/* 当容器激活时，设置一个足够大的 max-height 值 */
.search_results_container.active {
  max-height: 1000px; /* 设置一个足够大的值，确保能容纳所有内容 */
}

const searchResultsContainer = document.querySelector('.search_results_container');
const addedList = document.getElementById('added_list');

function _(selector) {
  return document.querySelector(selector);
}

const addButton = _('#add-item-button');

function addListItem(itemText) {
  const listItem = document.createElement('li');
  listItem.textContent = itemText;
  addedList.appendChild(listItem);
  // 当有内容时，添加 active 类，触发 max-height 过渡
  searchResultsContainer.classList.add('active'); 
}

function removeListItem(listItemElement) {
  if (listItemElement && addedList.contains(listItemElement)) {
    addedList.removeChild(listItemElement);
    // 如果列表为空，移除 active 类，使 max-height 变为 0
    if (addedList.children.length === 0) {
      searchResultsContainer.classList.remove('active');
    }
  }
}

// 示例用法
addButton.addEventListener('click', () => {
  addListItem(`新添加的列表项 ${Date.now()}`);
});

addedList.addEventListener('click', (event) => {
  if (event.target.tagName === 'LI') {
    removeListItem(event.target);
  }
});