悬浮按钮点击后不展开只抖动或无反应，主因是CSS动画与transform属性冲突，尤其display:none中断过渡；应改用visibility:hidden+opacity:0+pointer-events:none组合，并确保类切换原子性、避免will-change误用及合成层截断。
悬浮按钮点击后不展开，只抖动或无反应
多数情况是 CSS 动画或 transform 属性冲突导致的。浏览器对 transform 和 display: none 同时存在时的渲染行为不一致，尤其在折叠态用 display: none 会中断过渡动画。
- 改用
visibility: hidden+opacity: 0+pointer-events: none组合控制隐藏态，保留 DOM 占位和动画连贯性 - 确保展开/折叠的 CSS 类切换是原子操作，避免 JS 中先改
display再加类名——这会让浏览器跳过 transition - 检查是否误用了
will-change: transform但未触发硬件加速（比如父容器有overflow: hidden截断了合成层）
展开时工具项从顶部“砸”下来，不是沿弧线运动
所谓“运动轨迹”，本质是靠 CSS transform 的多值组合模拟。纯用 top/left 位移无法实现弧线，必须结合 rotate() 和 translate()。
- 给每个子按钮设不同
transition-delay（如 0.05s 递增），配合transform: translateX(20px) rotate(-5deg)等微调，视觉上形成扇形展开 - 不要用 JS 计算贝塞尔曲线坐标再逐帧设置——性能差且难维护；CSS 自带的
cubic-bezier(.17,.67,.83,.67)已足够模拟自然弹出感 - 注意：iOS Safari 对
transform-origin在 flex 子元素上的解析有偏差，建议显式设为transform-origin: center
折叠后按钮残留半透明残影或位置偏移
这是 transform 累积未重置导致的典型渲染 bug。每次展开都基于当前状态叠加变换，没归零就容易漂移。
- 所有子按钮的初始态必须写死
transform: translateX(0) translateY(0) rotate(0)，不能依赖继承或默认值 - JS 切换状态时，先移除所有 active 类，等
getComputedStyle(el).transform返回none后再加新类（可用offsetHeight强制重排） - 如果用了
scale()，务必搭配transform-origin: bottom right（侧边栏通常右下锚点），否则缩放中心错位
移动端点击区域小、响应迟滞
悬停（hover）在触屏设备上不可靠，且默认 touch 响应有约 300ms 延迟。快捷栏必须绕过 hover，直连 touchstart + click 双事件。
立即学习“前端免费学习笔记（深入）”；
- 按钮最小尺寸设为
min-width: 48px; min-height: 48px，符合 WCAG 触控标准 - 用
ontouchstart立即触发展开，但加个setTimeout(() => { /* 折叠逻辑 */ }, 250)防误触——比 CSS:active更可控 - 避免在展开动画进行中监听新点击；可在
transitionend后才启用子项的pointer-events: auto
实际做下来，最耗时间的不是动画本身，而是各浏览器对 transform 和 transition 边界条件的处理差异——特别是 Safari 对 transform: scale(0) 的渲染精度问题，得单独 hack。
