手风琴动效需用CSS transition配合JS切换class实现，核心是通过max-height或transform: scaleY()模拟高度变化，避免直接过渡height；必须兼顾无障碍（aria-expanded、role="button"）、图片懒加载时机、动态高度重算及性能优化（will-change、避免layout触发）。
手风琴动效的核心是 CSS 过渡 + JavaScript 控制类名
纯 HTML 无法实现展开动效，必须配合 class 切换和 transition。浏览器原生不支持“图片组手风琴”这种组件，得自己用 details 或更可控的 div + aria-expanded 实现。推荐后者——兼容性好、可定制性强、动画节奏自由。
关键点不是“怎么加动画”，而是“怎么让高度从 0 变到实际内容高”。直接对 height 做 transition 会失败（height: auto 无法过渡），得用 max-height 模拟，或用 transform: scaleY() 配合 overflow: hidden。
-
max-height方案简单，但需预估最大高度（比如设成max-height: 500px），否则收起时有卡顿 -
transform: scaleY()更精准，但需包裹一层内层容器，且要处理图片加载后高度变化导致的缩放错位 - 务必给触发元素加
role="button"和aria-expanded，否则屏幕阅读器无法识别状态
用 querySelectorAll 绑定多个图片组的展开/收起逻辑
一个页面常有多组图片，不能为每个写独立事件监听。用事件委托或批量绑定更稳妥。注意：别用 getElementsByClassName，它返回的是动态集合，循环中操作 DOM 容易漏绑。
document.querySelectorAll('.accordion-item').forEach(item => {
const header = item.querySelector('.accordion-header');
const content = item.querySelector('.accordion-content');
header.addEventListener('click', () => {
const isExpanded = content.getAttribute('aria-hidden') === 'false';
content.setAttribute('aria-hidden', isExpanded ? 'true' : 'false');
item.classList.toggle('is-expanded');
});
});
- 用
aria-hidden控制语义可见性，比仅靠display: none更健壮 -
is-expanded类只用于触发 CSS 动画，不参与逻辑判断 - 如果图片是懒加载（
loading="lazy"），首次展开时可能高度计算不准——建议在img.onload后手动触发一次content.style.maxHeight = content.scrollHeight + 'px'
transition 的 timing-function 和 duration 要匹配视觉预期
手风琴动效太慢显得迟钝，太快又像弹跳。CSS 中最常用的是 cubic-bezier(0.4, 0, 0.2, 1)（和 ease-in-out 接近但更顺滑），duration 控制在 300ms–400ms 之间比较自然。
立即学习“前端免费学习笔记（深入）”；
别忘了加 will-change: transform 或 backface-visibility: hidden 防止某些浏览器重绘卡顿，尤其在移动端。
- 避免对
height或margin做过渡——它们会触发 layout，性能差 - 如果用
max-height，起始值设为max-height: 0，结束值必须大于等于图片真实高度，否则动画中途截断 - 收起时，
max-height从大值变 0，浏览器会自动缓动；但若内容高度动态变化（比如窗口缩放），需要重新计算并重设max-height
图片加载完成前就点击展开？得处理 scrollHeight 为 0 的情况
刚进页面时，img 还没加载完，content.scrollHeight 是 0，此时设置 max-height 就会失效。不能等 window.onload，太晚；也不能只监听单张图，太碎。
稳妥做法是：给每组图片容器加 data-loaded="false"，在所有内部 img 的 onload 回调里检查是否全部加载完毕，再更新标记并初始化高度。
- 用
Promise.all(images.map(img => new Promise(r => img.onload = r)))等待全部图片加载 - 初始化时先设
max-height: 0，加载完再设为scrollHeight，并加overflow: hidden防止内容溢出 - 如果图片有宽高属性（
width/height）或aspect-ratio，能减少重排，提升动画稳定性
真正麻烦的不是写动画，是让动画在各种加载时机、缩放行为、无障碍需求下都稳住——这些细节不处理，用户一刷新或切屏就露馅。
