HTML toggle事件与requestAnimationFrame动画配合教程-html教程-PHP中文网

toggle事件本身不触发requestAnimationFrame；details元素的toggle事件同步触发但DOM未重绘，需在其中调用rAF获取scrollHeight并设置height以启动CSS动画。

html toggle事件与requestanimationframe动画配合教程

toggle 事件本身不触发 requestAnimationFrame

HTML 没有原生的 toggle 事件。你可能指的是 details/summary 元素展开收起时的 toggle 事件，或自定义的开关按钮（如 input[type="checkbox"]）的 change 事件误称为 toggle。浏览器不会在 DOM 展开/收起瞬间自动调用 requestAnimationFrame——它只是个普通事件，需要你手动接入动画循环。

details 元素触发的 toggle 事件是同步的，此时 DOM 已完成切换，但样式尚未重绘；若想在展开后启动平滑动画，得在事件回调里调用 requestAnimationFrame 延迟到下一帧开始
对 input[type="checkbox"] 或按钮模拟的 toggle，应监听 change 或 click，而非等待不存在的 toggle 事件
不要在事件处理器里直接写 element.style.height = 'auto' —— 这会强制同步布局，且无法过渡；requestAnimationFrame 不能绕过这个限制，只能帮你把“读取高度 → 设置动画起点 → 启动 rAF 循环”这几步安排在正确时机

在 details 元素 toggle 后启动 rAF 动画的正确时机

直接在 toggle 事件中修改样式并期望立即动画，大概率失败：浏览器还没完成 layout，offsetHeight 可能还是 0，或者 CSS transition 尚未生效。必须用 requestAnimationFrame 把操作推到重绘前。

先监听 details 的 toggle 事件
在回调里立刻调用 requestAnimationFrame，并在其回调中读取目标区域的 scrollHeight（不是 offsetHeight，因为后者在折叠时为 0）
拿到真实高度后，再设 style.height 为该值，并添加 CSS transition（或进入 rAF 驱动的逐帧插值）

示例关键片段：

details.addEventListener('toggle', () => {
  requestAnimationFrame(() => {
    const content = details.querySelector('.content');
    if (details.open) {
      content.style.height = content.scrollHeight + 'px';
    } else {
      content.style.height = '0';
    }
  });
});

用 rAF 实现 checkbox toggle 的逐帧展开/收起

当你要完全绕过 CSS transition、用 JavaScript 控制每帧高度变化时，requestAnimationFrame 是唯一可靠选择。重点不是“启动”，而是“状态管理 + 时间戳驱动 + 清理”。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

每次 change 事件触发，先调用 cancelAnimationFrame(animationId) 中止上一个动画，避免冲突
记录起始高度、目标高度（open ? scrollHeight : 0）、起始时间（performance.now()）
动画函数接收 currentTime 参数，计算 deltaTime，用缓动函数（如 t => t * t）算出当前高度比例
务必在动画结束时重置 height 为 'auto'（展开完毕）或 '0'（收起完毕），否则影响后续 scrollHeight 计算
错误示范：for (let h = 0; h —— 这会阻塞主线程，一帧内全执行完，毫无动画效果

容易被忽略的 DOM 读写陷阱

几乎所有 toggle + rAF 组合卡顿的根源，都来自动画帧内“读高写低”的 DOM 操作模式。

不要在 rAF 回调里反复读取 element.offsetHeight 或 getComputedStyle(element).height —— 每次读都会触发强制同步布局
所有读操作（如 scrollHeight、clientWidth）必须集中在第一帧完成，并缓存为变量
所有写操作（如 style.height、style.transform）集中放在帧末尾，且优先用 transform 替代 height（例如用 scaleY 模拟展开）
移动端要注意：details 在 iOS Safari 上 toggle 事件触发时机略有延迟，建议加 16ms 的 setTimeout 容错（仅 iOS），或统一改用 click + 手动切换 open 属性