cubic-bezier(0.68, -0.55, 0.27, 1.55) 能做出“弹出感”，因其控制点y值超出[0,1]范围，使动画先反向收缩、再冲过目标位置、最后回落，模拟了物理过冲与回弹；而纯ease-in-out缺乏该动态反馈。
为什么 cubic-bezier(0.68, -0.55, 0.27, 1.55) 能做出“弹出感”
纯 ease-in-out 或 ease 的过渡太“顺滑”，缺乏物理反馈；而弹性动画本质是模拟过冲（overshoot）+ 回弹（rebound）。cubic-bezier(0.68, -0.55, 0.27, 1.55) 中的 y 值超出 [0,1] 范围（-0.55 和 1.55），让动画先反向收缩再加速冲过目标位置，最后回落——这正是人眼感知“弹性”的关键。
注意：贝塞尔曲线的两个控制点 y 坐标必须在 [-0.5, 2.0] 区间内才被主流浏览器稳定支持；超出可能触发回退到 linear 或直接失效。
- 不要用在线生成器直接抄“超弹”参数（如 y=3.0），Chrome 会静默降级
-
transition-timing-function必须作用于宽度/位移/transform 等可插值属性，不能只写在display或visibility上 - 若侧边栏初始为
display: none，需先设为display: block再触发动画（否则无过渡）
侧边栏结构中哪些属性必须用 transform 而非 width
直接 animating width 会触发 layout + paint，卡顿明显；而 transform: translateX() 只走合成器线程，60fps 更稳。尤其当侧边栏含图片、阴影或复杂子元素时，差异肉眼可见。
典型错误写法：transition: width 0.4s cubic-bezier(0.68,-0.55,0.27,1.55); —— 即使曲线对，性能也差。
- 推荐方案：固定侧边栏宽度（如
width: 300px），用transform: translateX(-300px)隐藏，translateX(0)弹出 - 必须同时加
will-change: transform（仅在激活态添加，避免常驻开销） - 若需响应式适配移动端，用
max-width+transform组合，别在媒体查询里改transition-timing-function
如何用 JS 控制弹性侧边栏的打开/关闭节奏
单纯靠 CSS :hover 或 :focus 不够灵活；真实场景需要点击按钮、监听路由、或 ESC 键关闭。JS 的核心任务是切换 class，并确保状态同步。
关键点不在“加 class”，而在“何时加”和“加完后做什么”：
- 点击按钮后立即添加
is-openclass，但不要等transitionend再启用交互——用户可能快速连点，需用pointer-events: none临时禁用按钮 - 关闭时，先移除
is-open，再监听transitionend事件清理 DOM（如移除挂载的 React 组件） - 如果侧边栏内容是异步加载的，动画开始后再请求数据，避免白屏等待；用
setTimeout(() => loadContent(), 30)比监听transitionstart更可靠
移动端 Safari 下弹性动画突然变生硬的修复方法
Safari 15.4+ 对负 y 值的 cubic-bezier 处理更严格，cubic-bezier(0.68,-0.55,0.27,1.55) 在部分 iOS 版本会 fallback 到 ease。不是 bug，是渲染引擎限制。
实测有效的兼容策略：
- 用
@supports (transition-timing-function: cubic-bezier(0.68,-0.55,0.27,1.55))包裹弹性定义，不支持时降级为ease-out - 给侧边栏加
-webkit-transform: translateZ(0)强制开启硬件加速（Safari 对 transform 优化依赖此） - 避免在
transform中混用scale和translateX—— Safari 的复合变换插值易出错，只用translateX最稳
弹性动画的“复杂点”不在曲线本身，而在于它把布局、渲染、JS 时序、跨端兼容全串在一起——少一个环节，弹出来的就不是“弹性”，而是“抽搐”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
