在网页交互设计中，点击按钮触发展开/收起动画是提升用户体验的常用手段，常见于内容折叠、侧边栏切换等场景。实现该功能需要结合CSS的过渡属性和JavaScript的动态样式控制，核心是通过动态修改元素的高度属性配合过渡效果实现平滑动画。
核心实现思路
展开收起动画的本质是让元素的高度从0过渡到目标高度，或者从目标高度过渡到0。由于CSS的transition属性无法直接对height: auto生效，所以需要通过JavaScript动态计算元素展开时的实际高度，再将该高度赋值给元素，配合CSS过渡完成动画。
CSS部分配置
首先需要为需要展开收起的元素设置基础样式和过渡属性，核心是使用transition监听height属性的变化，同时设置overflow: hidden避免内容溢出影响布局。
/* 折叠内容容器基础样式 */
.collapse-content {
height: 0;
overflow: hidden;
transition: height 0.3s ease;
background-color: #f5f5f5;
padding: 0 16px;
}
/* 展开状态下的类 */
.collapse-content.expanded {
/* 高度由JS动态计算赋值 */
padding: 16px;
}
/* 触发按钮样式 */
.toggle-btn {
padding: 8px 16px;
background-color: #1890ff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
margin-bottom: 8px;
}
JavaScript逻辑实现
JavaScript部分需要完成三个核心任务：监听按钮点击事件、动态计算展开内容的实际高度、切换元素的展开/收起状态并控制动画执行。
// 获取DOM元素
const toggleBtn = document.querySelector('.toggle-btn');
const collapseContent = document.querySelector('.collapse-content');
// 点击按钮触发事件
toggleBtn.addEventListener('click', function() {
// 判断当前是否是展开状态
const isExpanded = collapseContent.classList.contains('expanded');
if (isExpanded) {
// 收起逻辑：先将当前高度设置为固定值，再改为0触发过渡
collapseContent.style.height = collapseContent.scrollHeight + 'px';
// 触发重排，确保高度赋值生效
collapseContent.offsetHeight;
collapseContent.style.height = '0';
collapseContent.classList.remove('expanded');
toggleBtn.textContent = '点击展开内容';
} else {
// 展开逻辑：计算内容的实际高度，赋值后触发过渡
collapseContent.style.height = collapseContent.scrollHeight + 'px';
collapseContent.classList.add('expanded');
toggleBtn.textContent = '点击收起内容';
// 过渡结束后移除固定高度，避免内容变化后高度不匹配
collapseContent.addEventListener('transitionend', function handler() {
if (collapseContent.classList.contains('expanded')) {
collapseContent.style.height = 'auto';
}
collapseContent.removeEventListener('transitionend', handler);
});
}
});
HTML结构示例
对应的HTML结构非常简单，只需要按钮和折叠内容容器即可，内容可以自定义填充。
<button class="toggle-btn">点击展开内容</button>
<div class="collapse-content">
<p>这里是折叠展示的内容，可以放置任意HTML元素，比如文本、图片、表单等。</p>
<p>当点击按钮时，这段内容会以平滑的动画效果展开或者收起，提升页面的交互体验。</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
</div>
注意事项
- 设置
overflow: hidden是必须的，否则内容在高度过渡过程中会溢出容器。 - 收起时先将当前高度设为固定值再改为0，是为了让过渡效果正常触发，否则直接从auto到0不会有动画。
- 展开后过渡结束将高度设为auto，是为了避免后续内容动态变化时高度无法自适应。
- 如果展开内容中包含图片等资源，需要等图片加载完成后再计算高度，否则会出现高度计算不准确的问题。
常见问题解答
为什么动画不生效？
首先检查CSS中是否设置了transition属性，并且监听的是height属性。其次确认是否给元素设置了overflow: hidden，最后检查JavaScript中是否正确赋值了固定高度，而不是使用height: auto直接过渡。
如何调整动画速度？
只需要修改CSS中transition属性的时间值即可，比如将0.3s改为0.5s可以让动画更慢，改为0.1s可以让动画更快。
JavaScriptCSS展开收起动画transition修改时间：2026-06-19 01:24:45