旧浏览器中transition卡顿或失效主因是未进入GPU合成层，需用translate3d(0,0,0)、backface-visibility:hidden等强制图层，禁用will-change和transition:all，显式声明属性，注意事件名兼容性及JS操作时机。
旧浏览器（IE11、Android 4.4 WebView、Safari 9–10）里 transition 卡顿或失效，通常不是代码写错了，而是浏览器压根没进 GPU 合成层——得手动“推”它一把。
为什么 translateX() 在 IE11 里卡成幻灯片？
因为 IE11 对 translateX() 的硬件加速支持极弱，常被降级为 CPU 渲染。它真正认的是带 Z 轴的强制图层创建方式。
-
transform: translate3d(0, 0, 0)比translateX()更可靠，是触发 GPU 合成最稳妥的写法 -
backface-visibility: hidden在 IE11 中比translateZ(0)更稳，能强制创建独立合成层 -
will-change: transform在 IE11 完全无效，在 Android 4.4 可能引发闪烁，别用 - 如果父元素有
filter或overflow: hidden，整层会被拖回 CPU 渲染，opacity 也会失效
transition 声明被浏览器悄悄忽略？
旧引擎对简写和继承极度敏感，稍有不一致就清空整个过渡链。
- 禁止用
transition: all .3s这类宽泛写法；必须显式列出属性：transition: transform 0.3s cubic-bezier(.25,.46,.45,.94), opacity 0.3s ease - 媒体查询中重写
transition时，必须完整重复所有参数，不能只改时长或函数 - JS 动态加 class 后立刻改
style.transform，会因样式未生效导致过渡断裂；应加requestAnimationFrame等一帧再操作
transitionend 监听不到或延迟触发？
Safari 9–10 和 Android 4.4 中事件名不统一、冒泡不可控、甚至丢失，纯靠监听风险极高。
- 先检测真实事件名：
webkitTransitionEnd（Safari/旧 Chrome）、transitionend（Firefox/Edge/现代 Chrome） - 监听时加
{ once: true }防重复，同时用setTimeout兜底清理临时 class 或will-change - 避免在
touchstart中连续读写尺寸 —— 一次getBoundingClientRect()就可能阻塞合成器初始化
最易被忽略的一点：旧浏览器里，transition 不是“加了就动”，它只响应由 CSS 规则触发的值变化（如 :hover、class 切换后真实生效的样式），而 JS 直接改 style.width 或 display 这类不可动画属性，根本不会启动过渡。验证是否真变了，得看 getComputedStyle(el).transform，而不是只盯 class 名。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
