弹性动画需用特定贝塞尔曲线（如cubic-bezier(0.68,-0.55,0.27,1.55)）模拟弹簧回弹，仅靠ease-out无效；必须配合transform位移、避免display切换与重排，并确保dom状态和css规则提前就位。
弹性动画不是加个 ease-out 就够了
“弹性”在 CSS 动画里特指类似弹簧回弹的非线性运动（如 cubic-bezier(0.68, -0.55, 0.27, 1.55)），不是普通缓动。直接用 transition: all 0.4s ease-out 只会得到减速收尾，没有拉伸-回弹感。浏览器原生 transition 不支持物理模拟，必须靠贝塞尔曲线手动逼近。
常见错误是把 ease-in-out 当弹性——它对称平滑，但缺乏初始加速和末端过冲，用户感知不到“弹”。真正弹性需：起始段速度突增（模拟释放）、中段快速穿越、末端明显过冲再回调。
- 推荐曲线：
cubic-bezier(0.68, -0.55, 0.27, 1.55)（经实测在多数设备上回弹自然） - 慎用
spring()函数：Chrome 支持但 Safari 仍不兼容，且参数难调，容易卡顿 - 弹性只适合位移类动画（
transform: translateX()），别用在opacity上——透明度无法“过冲”，强行配弹性曲线反而显得抽搐
用 transform + 弹性曲线做左右滑入滑出
标签页左右滑动是最适配弹性的场景，因为位移可被曲线充分表达。关键不是“怎么动”，而是“动之前怎么稳住布局”。直接改 left 或 margin-left 会触发重排，弹性动画立刻变卡顿。
- 必须用
transform: translateX()，它走合成层，不触发布局计算 - 初始状态设为
transform: translateX(100%)（右出页）或translateX(-100%)（左出页），激活页为translateX(0) - CSS 中写死过渡：
.tab-pane { transition: transform 0.45s cubic-bezier(0.68, -0.55, 0.27, 1.55); } - 父容器加
overflow: hidden，否则滑出部分可能短暂溢出可见 - 低端安卓机上若仍有卡顿，加
will-change: transform提前提示（但别滥用，仅加在 .tab-pane 上）
为什么 display: none 切换绝对不能加弹性
这是最容易踩的坑：display 是离散属性，浏览器根本不允许它参与 transition。你写 transition: display 0.4s cubic-bezier(...) 完全无效，CSS 解析器会直接忽略整条声明。
更危险的是，有人试图绕过限制：先设 opacity: 0; visibility: hidden，再用弹性曲线过渡 opacity。这看似可行，但结果是——旧面板瞬间消失，新面板弹入，中间有视觉断层，根本不是“切换动画”，而是“单边入场”。
- 弹性动画要求新旧状态同时存在并持续插值，
display: none直接销毁渲染树节点，插值无从谈起 - 如果内容含
iframe或视频，用visibility: hidden保状态，但位移动画仍得靠transform，不能依赖opacity模拟“进出” - 真要保资源状态又想要弹性，唯一办法是让所有面板始终在 DOM 中，仅用
transform控制位置，配合z-index确保层级正确
JS 切换时 class 同步必须原子化
弹性动画对状态切换时机极其敏感。如果 JS 先移除旧 active 类、再添加新类，中间存在一个“全无 active”的空窗期，浏览器可能渲染空白帧，导致动画跳变或回退。
正确做法是用一次 DOM 批量操作完成状态翻转，避免 layout thrashing：
- 切换前先给所有面板加一个临时类（如
is-transitioning），统一设transition属性 - 用
element.classList.toggle('active', condition)配合dataset批量控制，而不是分两步remove+add - 确保目标面板的
transform值在 class 应用前就已存在于 CSS 规则中（即不要靠 JS 写内联 style 设置 transform） - 如果用 View Transitions API，
viewTransitionName必须在切换前就存在，且新旧元素 name 完全一致，否则弹性动画会降级为默认淡入
弹性动画最脆弱的地方不在曲线参数，而在 DOM 状态是否干净、CSS 规则是否提前就位、GPU 加速是否真正启用——漏掉其中任一环，看起来就像“动画突然卡住了一下”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
