transform:scale()比width/height更适合fab菜单动画，因其不触发布局重排、支持gpu加速，且天然匹配中心放射展开的几何逻辑，配合opacity和精确cubic-bezier缓动可实现流畅物理感动画。
为什么 transform: scale() 比 width/height 更适合 FAB 菜单动画
直接改 width 或 height 会触发重排（reflow），尤其在菜单项数量动态变化时，容易卡顿或跳帧；而 transform 属于合成层操作，浏览器可交由 GPU 加速。FAB 菜单本质是「中心点放射展开」，scale() 天然匹配这个几何逻辑——所有子项从 scale(0) 同步放大到 scale(1)，再配合 opacity 隐藏/显示，视觉上更干净。
实操建议：
- 给每个菜单项设置
transform-origin: center，避免默认左上角缩放导致偏移 - 过渡必须同时声明
transform和opacity：例如transition: transform 0.3s cubic-bezier(0.17, 0.67, 0.83, 0.67), opacity 0.3s ease - 不要只写
transition: all 0.3s——会意外过渡其他属性（如color、box-shadow），拖慢性能
:hover 无法满足多状态切换？用 JavaScript 控制 data-state 更可靠
CSS 的 :hover 在移动端无效，且无法区分「点击展开」「点击收起」「外部点击关闭」等逻辑。真实项目中应放弃纯 CSS 方案，改用 class 切换或自定义 data 属性驱动样式。
实操建议：
- HTML 结构里给菜单容器加
data-state="closed"，初始设为closed - JS 点击按钮时切换为
data-state="open"，再监听该属性写 CSS：[data-state="open"] .fab-item { transform: scale(1); opacity: 1; } - 注意添加
pointer-events: none到未展开的.fab-item，防止悬停穿透或误触
弹性缓动（cubic-bezier）怎么调才不“假”？避开常见曲线陷阱
FAB 展开需要「先快后慢再微回弹」的物理感，但直接套用 cubic-bezier(0.68, -0.55, 0.27, 1.55) 这类网红值，常导致收起时像被吸回去、或展开末尾拖沓。关键不是参数多炫，而是匹配动作节奏。
实操建议：
- 展开用
cubic-bezier(0.17, 0.67, 0.83, 0.67)（类似 Material Design 的标准 easing）——前段加速快，后段有轻微减速，不突兀 - 收起用更收敛的
cubic-bezier(0.25, 0.46, 0.45, 0.94)，避免「弹跳感过强」 - 绝对不要让贝塞尔曲线的 y 值超出 [0,1] 范围（如 -0.55 或 1.55），否则动画会在可视区外抽动，尤其在 Safari 上易出现渲染撕裂
为什么菜单项定位用 position: absolute 而不是 flex？
Flex 布局依赖父容器尺寸和流式计算，在 scale(0) 状态下，子项仍占据文档流空间，导致父容器高度塌陷异常；而绝对定位能彻底脱离布局流，让缩放纯粹作用于视觉层。
实操建议：
- 父容器设
position: relative，菜单项统一position: absolute+top/left精确偏移 - 偏移量用
calc()计算：例如第 2 项top: calc(50% - 40px); left: calc(50% + 60px);，其中40px是按钮半高，60px是旋转半径 - 若需响应式适配，把半径值抽成 CSS 变量：
--fab-radius: 60px;，再在媒体查询中覆盖
弹性过渡真正难的不是写几行 CSS，而是理解哪些属性该进 GPU 合成层、哪些状态必须由 JS 显式管理、以及贝塞尔曲线背后的时间感知逻辑——这些细节一旦错位，动画就会显得生硬或不可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
