怎样用CSS操作数据下拉筛选—details动画展开

<details class="data-filter-dropdown">
  <summary>选择筛选条件 <span class="arrow"></span></summary>
  <div class="filter-content">
    <p>这里是你的筛选内容：</p>
    <ul>
      <li>选项一</li>
      <li>选项二</li>
      <li>选项三</li>
      <li>选项四</li>
      <li>选项五</li>
    </ul>
    <button>应用</button>
  </div>
</details>

.data-filter-dropdown {
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 15px;
  overflow: hidden; /* 确保内容在收起时被裁剪 */
  background-color: #f9f9f9;
}

.data-filter-dropdown summary {
  padding: 10px 15px;
  background-color: #eee;
  cursor: pointer;
  list-style: none; /* 移除默认的箭头 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  user-select: none; /* 防止文本被选中 */
}

/* 自定义箭头 */
.data-filter-dropdown summary .arrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #333;
  transition: transform 0.3s ease;
}

/* details展开时箭头的旋转 */
.data-filter-dropdown[open] summary .arrow {
  transform: rotate(180deg);
}

.filter-content {
  max-height: 0; /* 初始状态，内容高度为0 */
  opacity: 0; /* 初始状态，内容不可见 */
  overflow: hidden;
  transition: max-height 0.4s ease-out, opacity 0.4s ease-out; /* 过渡效果 */
  padding: 0 15px; /* 初始内边距为0，避免在收起时占位 */
}

.data-filter-dropdown[open] .filter-content {
  max-height: 500px; /* 展开时给一个足够大的高度 */
  opacity: 1; /* 展开时可见 */
  padding: 15px; /* 展开时恢复内边距 */
}

/* 针对内容本身的样式，确保在max-height限制下也能良好显示 */
.filter-content p, .filter-content ul, .filter-content button {
  margin-bottom: 10px;
}
.filter-content ul {
  list-style: none;
  padding: 0;
}
.filter-content li {
  padding: 5px 0;
}
.filter-content button {
  padding: 8px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

document.querySelectorAll('.data-filter-dropdown').forEach(details => {
  const content = details.querySelector('.filter-content');

  details.addEventListener('toggle', () => {
    if (details.open) {
      // 当details打开时，先确保max-height足够大，并移除height属性，让内容自然撑开
      content.style.maxHeight = content.scrollHeight + 'px'; // 设置为实际滚动高度
      content.style.opacity = 1;
      content.style.padding = '15px'; // 恢复内边距
    } else {
      // 关闭时，先设置一个固定的height，然后过渡到0
      // 这一步是为了确保在过渡开始时，height有一个明确的起始值
      content.style.maxHeight = content.scrollHeight + 'px'; // 确保当前高度是实际高度
      requestAnimationFrame(() => { // 确保浏览器在下一帧执行动画
        content.style.maxHeight = '0';
        content.style.opacity = 0;
        content.style.padding = '0 15px'; // 收起时内边距回到0
      });
    }
  });

  // 为了避免内容在关闭后仍然占据空间，可以在过渡结束后重置maxHeight
  content.addEventListener('transitionend', () => {
    if (!details.open) {
      content.style.maxHeight = '0'; // 确保完全收起
    }
  });
});