CSS怎样制作卡片手风琴折叠效果？height自动过渡动画-css教程-PHP中文网

CSS怎样制作卡片手风琴折叠效果？height自动过渡动画

星夢妙者

发布： 2025-08-12 14:22:01

原创

921人浏览过

要实现css卡片手风琴折叠效果并让height自动过渡，核心是使用max-height结合overflow: hidden和transition；1. 创建包含卡片标题和内容的html结构；2. 默认设置.card-content的max-height为0，overflow: hidden，通过transition控制max-height的动画；3. 点击时通过javascript切换active类，并动态设置max-height为cardcontent.scrollheight以实现内容高度自适应；4. 折叠时将max-height重置为0，实现平滑过渡；5. 为提升性能，可缓存scrollheight、使用requestanimationframe或虚拟化技术；6. 替代方案包括css grid/flexbox布局、javascript动画库或transform: scaley，但max-height法在简单场景下最为实用且兼容性好，最终效果自然流畅并支持自动高度过渡。

CSS怎样制作卡片手风琴折叠效果？height自动过渡动画

CSS制作卡片手风琴折叠效果，并且实现height自动过渡动画，核心在于利用

max-height

登录后复制

和

overflow: hidden

登录后复制

属性，配合

transition

登录后复制

实现平滑展开和收缩。关键点在于，我们不能直接使用

height: auto

登录后复制

进行过渡，因为CSS无法直接从一个固定值过渡到

auto

登录后复制

。

解决方案：

首先，我们需要一个包含多个卡片的容器。每个卡片包含一个标题和一个内容区域。默认情况下，内容区域是折叠的。

立即学习“前端免费学习笔记（深入）”；

<div class="accordion">
  <div class="card">
    <div class="card-header">标题1</div>
    <div class="card-content">内容1</div>
  </div>
  <div class="card">
    <div class="card-header">标题2</div>
    <div class="card-content">内容2</div>
  </div>
</div>

登录后复制

然后，我们使用CSS来设置样式。关键在于

card-content

登录后复制

的样式。

.accordion {
  width: 300px;
}

.card {
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden; /* 确保内容超出时隐藏 */
}

.card-header {
  padding: 10px;
  background-color: #f0f0f0;
  cursor: pointer;
}

.card-content {
  padding: 10px;
  max-height: 0; /* 初始高度为0，隐藏内容 */
  overflow: hidden; /* 隐藏超出部分 */
  transition: max-height 0.3s ease-out; /* 添加过渡效果 */
}

.card.active .card-content {
  max-height: 500px; /* 设置一个足够大的值，确保内容完全展开 */
}

登录后复制

最后，使用JavaScript来切换卡片的

active

登录后复制

类。

const cardHeaders = document.querySelectorAll('.card-header');

cardHeaders.forEach(header => {
  header.addEventListener('click', () => {
    const card = header.parentNode;
    card.classList.toggle('active');
  });
});

登录后复制

这里的

max-height: 500px

登录后复制

是一个技巧。我们需要设置一个足够大的值，确保内容能够完全展开。但这个值不能太大，否则过渡效果会显得很慢。实际上，更好的做法是动态计算内容的高度，然后将这个值赋给

max-height

登录后复制

。但这会增加代码的复杂性，所以这里使用了固定值。

卡拉OK视频制作

卡拉OK视频制作，在几分钟内制作出你的卡拉OK视频

178

查看详情

如何动态计算内容高度并应用于max-height？

可以使用JavaScript来动态获取内容的高度，并在点击时设置

max-height

登录后复制

。这可以避免使用固定值，使过渡效果更加自然。

const cardHeaders = document.querySelectorAll('.card-header');

cardHeaders.forEach(header => {
  header.addEventListener('click', () => {
    const card = header.parentNode;
    const cardContent = card.querySelector('.card-content');
    const isExpanded = card.classList.contains('active');

    if (isExpanded) {
      cardContent.style.maxHeight = '0';
      card.classList.remove('active');
    } else {
      cardContent.style.maxHeight = cardContent.scrollHeight + 'px';
      card.classList.add('active');
    }
  });
});

登录后复制

这段代码首先获取卡片内容的高度

cardContent.scrollHeight

登录后复制

，然后将其设置为

max-height

登录后复制

。当卡片折叠时，

max-height

登录后复制

被设置为0。这样，过渡效果会更加自然，因为

max-height

登录后复制

会根据内容的实际高度进行调整。scrollHeight是元素内容完整的高度，包括溢出部分。

如何优化手风琴效果的性能？

频繁地操作DOM可能会影响性能。特别是在有大量卡片的情况下，每次点击都重新计算高度可能会导致卡顿。可以考虑使用以下方法来优化性能：

减少重绘和重排： 尽量避免频繁地修改DOM。例如，可以使用
```
requestAnimationFrame
```
登录后复制
来批量更新DOM。
使用CSS硬件加速： 某些CSS属性可以利用硬件加速来提高性能。例如，可以使用
```
transform: translateZ(0)
```
登录后复制
来启用硬件加速。
虚拟化： 如果有大量的卡片，可以考虑使用虚拟化技术来只渲染可见的卡片。
缓存高度： 可以在初始化时缓存每个卡片内容的高度，避免每次点击都重新计算。

除了max-height，还有其他方法实现类似效果吗？

虽然

max-height

登录后复制

是实现自动高度过渡的常用方法，但还有其他一些方法可以实现类似的效果：

使用CSS Grid或Flexbox： 可以使用CSS Grid或Flexbox来自动调整元素的高度。但这可能需要更复杂的CSS布局。
使用JavaScript动画库： 可以使用JavaScript动画库（如GreenSock或Anime.js）来实现更复杂的动画效果。这些库通常提供更灵活的控制和更好的性能。
使用CSS
scaleY
登录后复制
：可以使用
```
transform: scaleY(0)
```
登录后复制
和
```
transform: scaleY(1)
```
登录后复制
来实现垂直方向的缩放效果。但这可能会影响元素的布局。