直接在transition简写中用var(--easing)会失效，因为浏览器无法确定变量归属timing-function还是delay，导致整条声明被忽略；必须单独使用transition-timing-function并配合property和duration才能安全生效。
为什么直接在transition里用var(--easing)会失效
因为transition是简写属性，浏览器解析时会把整个值按固定顺序拆解：property → duration → timing-function → delay。如果只写transition: transform 0.3s var(--easing)，浏览器无法确定var(--easing)该归属到哪一档——它既可能是timing-function，也可能是delay（尤其当变量值带单位如0.2s时）。结果就是整条声明被忽略，退化为无过渡。
transition-timing-function必须单独声明
真正能安全使用 CSS 变量的，是transition-timing-function这个独立属性。它只接受缓动函数值，不会歧义：
- 定义变量：
:root { --nav-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94); } - 单独设置：
.nav-link { transition-timing-function: var(--nav-easing); } - 必须配套声明
transition-property和transition-duration，否则无效 - 若需多个属性不同缓动（比如
transform用cubic-bezier，opacity用ease-out），得用逗号分隔、一一对应：transition-timing-function: cubic-bezier(...), ease-out;，此时变量只能用于其中一项，不能混用
别用all搭配变量控制缓动
transition: all 0.3s var(--easing)看着省事，但隐患大：
-
all会把box-shadow、border-color等低频变化也纳入过渡，触发额外重绘 - 一旦某个子元素修改了
font-size或line-height，all就悄悄接管，而你的--easing可能完全不适用于文字渲染节奏 - 变量值若被误设为
steps(3)，all会让所有属性都“跳格子”，包括背景色——视觉上极不自然
移动端真机上ease-in-out可能被降级
部分旧版 iOS Safari 和 Android WebView 对预设关键词支持不稳定，ease-in-out有时回退成ease甚至硬切。解决办法很实在：
- 统一用
cubic-bezier()替代所有预设关键词：--easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);（这是ease-in-out的等效贝塞尔） - 变量名带语义，比如
--easing-nav-enter、--easing-btn-press，避免复用错场景 - 真机调试时打开 Safari 开发者工具 → Elements → 查看 computed 样式里的
transition-timing-function是否真的解析成了贝塞尔值，而不是ease-in-out字符串
transition-timing-function这一行更容易批量替换——但每一处使用，都得确保 property 和 duration 同步更新，否则缓动再精准也没人看见。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
