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

.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);   } });

Picit AI

免费AI图片编辑器、滤镜与设计工具

172

查看详情

.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);   } });