js实现伸缩
JavaScript 实现伸缩效果
JavaScript 实现伸缩效果通常涉及 DOM 元素的动态高度或宽度调整，常见于折叠面板、手风琴菜单等交互场景。以下是几种实现方法：
使用 CSS transition 配合 JavaScript 控制
通过 JavaScript 修改元素的 height 或 width 属性，结合 CSS 过渡效果实现平滑伸缩：
const element = document.getElementById('target');
element.style.transition = 'height 0.3s ease';
// 展开
element.style.height = '200px';
// 收缩
element.style.height = '0';动态计算内容高度
对于不确定高度的内容，可通过 scrollHeight 获取实际高度后动态设置：
const toggleElement = () => {
const element = document.getElementById('target');
if (element.style.height === '0px' || !element.style.height) {
element.style.height = `${element.scrollHeight}px`;
} else {
element.style.height = '0';
}
};使用 classList 切换 CSS 类
定义 CSS 类控制伸缩状态，通过 JavaScript 切换类名：
.collapsible {
height: 0;
overflow: hidden;
transition: height 0.3s ease;
}
.expanded {
height: auto;
}document.getElementById('toggleButton').addEventListener('click', () => {
document.getElementById('target').classList.toggle('expanded');
});使用 Web Animation API
通过 JavaScript 直接创建动画效果：
const element = document.getElementById('target');
element.animate(
[{ height: '0' }, { height: `${element.scrollHeight}px` }],
{ duration: 300, easing: 'ease-in-out' }
);注意事项
- 确保伸缩容器设置
overflow: hidden避免内容溢出 - 对于动态内容，需在内容变化后重新计算
scrollHeight - 移动端考虑添加
will-change: height优化性能 - 使用
requestAnimationFrame确保动画流畅性
以上方法可根据具体需求选择或组合使用，CSS 过渡方案性能较好，适合简单场景；Web Animation API 提供更精细的控制，适合复杂交互。
