css transition仅对可计算、可插值属性生效，如opacity、transform、background-color等；display、height:auto、position:static等无效；需初始化显式值、正确声明transition位置，并优先使用transform和opacity以避免重排。
transition写哪些属性才真正生效
CSS transition 不是给所有属性都管用。比如 display、height（从 0 到 auto）、position（值为 static 时）这些，改了也不会动。浏览器只对“可计算、可插值”的属性做过渡，常见能动的有：
opacity-
transform（推荐优先用这个，性能好） -
background-color、color -
width、height（但必须是具体数值，不能是auto） -
margin、padding（同上，需确定值）
别硬套 transition: all 0.3s，它会尝试过渡每个变化的属性，但很多根本不可动画，还可能意外触发重排（layout），拖慢页面。
移动端卡顿？大概率是用了非合成属性
iOS 和 Android 的 WebView 对 transform 和 opacity 是走 GPU 合成层的，几乎不掉帧；但改 left、top、width 这类会触发重排 + 重绘，尤其低端机上一卡一卡。
- ✅ 推荐写法：
transform: translateX(10px)+transition: transform 0.25s ease-out - ❌ 避免写法：
left: 10px+transition: left 0.25s
另外注意：如果父容器有 overflow: hidden，而子元素用 transform 移出边界，部分安卓机型（尤其是旧版 UC）可能裁剪异常，得加 will-change: transform 或临时用 translateZ(0) 触发硬件加速（但别滥用，多了反而占内存）。
transition没反应？检查这三件事
常见“写了但不动”的原因不是语法错，而是触发条件没满足：
-
transition必须写在初始状态里，不是 hover 或 active 里。比如：.box { transition: opacity 0.3s; } .box:hover { opacity: 0.5; }而不是把transition写在:hover块里。 元素得有“可变的起始值”。比如刚插入 DOM 时
opacity是空的（继承或默认），浏览器无法算差值。稳妥做法是初始化显式值：opacity: 1。移动端 touch 事件下，有些场景（如快速点击后立刻移开）可能因事件冒泡或 CSS 状态未及时更新导致过渡被跳过。可用
setTimeout(() => {}, 0)微任务延迟触发状态变更，或改用transform+will-change提前提示渲染引擎。
不同设备过渡时长怎么设才自然
0.2s–0.35s 是多数人感知最舒服的区间，但移动端要更谨慎：
- iOS 上
0.25s比较跟手，0.4s就开始显得拖沓 - 安卓中低端机建议不超过
0.3s，且避免多个属性同时过渡（比如transform+opacity+background-color） - 如果是手势驱动的动效（比如 swipe 导航），别用
transition，该上requestAnimationFrame或scroll-driven animations（新 API，兼容性有限）
另外，用户开了“减少动画”系统偏好（iOS 的 prefers-reduced-motion，安卓也有类似开关），记得兜底：
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01s !important; }
}
过渡动效看着简单，实际在移动端最麻烦的从来不是写法，而是“什么时候不该动”和“动了但用户没感知到”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
