如何检测浏览器是否支持CSS transition-css教程-PHP中文网

最快检测 transition 支持的方法是 'transition' in document.createelement('i').style，返回布尔值；需按标准、webkit、moz、ms 顺序检测前缀；css.supports() 不适用于属性存在性检测，且兼容性差。

如何检测浏览器是否支持css transition

直接用 `'transition' in document.createElement('i').style` 最快

这行代码能立刻返回 true 或 false，不用创建真实 DOM、不依赖 document.body 或 document.documentElement（Firefox 和旧 IE 在这些上行为不一致）。它本质是查元素的 style 对象是否暴露了 transition 属性名。

常见错误现象：'transition' in document.body.style 在 Firefox 无 doctype 时会报错；'transition' in document.head.style 返回 undefined 导致判断失效。

必须用 document.createElement('i') 这类轻量标签，'div' 也行，但别用语义化强或可能被 CSS 重置的元素
该方法只检测标准属性名，不自动识别前缀 —— 但现代浏览器（Chrome 26+、Firefox 16+、Safari 6.1+、IE10+）已全量支持标准 transition，无需再查 -webkit-transition 等
如果项目仍需兼容 Android 4.3 WebView 或 iOS 6 Safari，才需要额外检测 'WebkitTransition' in div.style

`CSS.supports('transition: all 0.1s')` 不推荐

CSS.supports() 是为 CSS 声明设计的，不是为属性存在性检测。传入 'transition: all 0.1s' 虽然语法合法，但返回 true 只代表浏览器能解析这条声明，并不保证动画实际能触发（比如在 @keyframes 内或伪元素中仍可能被忽略）。

更关键的是：这个调用方式容易误写成 CSS.supports('transition')（缺值）或 CSS.supports('(transition: all)')（多括号），两者都返回 false，且无法定位问题。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

自定义属性检测（如 --color）才必须用 CSS.supports('--x: y') 这种完整声明形式
对 transition 这类原生属性，CSS.supports() 属于高射炮打蚊子，既慢又绕
它在 IE 完全不可用，Edge 12+ 才开始支持，而 in style 方式从 IE6 就能跑

需要兼容 IE10 或旧 WebView？补前缀检测逻辑

IE10 支持标准 transition，但某些冻结内核的安卓 WebView（如微信 X5 内核 3.7）只认 -webkit-transition。这时不能只靠单次检测，得按优先级顺序试：

先查 'transition' in el.style（标准）
再查 'WebkitTransition' in el.style（WebKit 前缀，对应 -webkit-transition）
再查 'MozTransition' in el.style（仅 Firefox ≤15，基本可跳过）
最后查 'msTransition' in el.style（IE10 私有，IE11 已弃用）

注意：el.style.WebkitTransition 是驼峰写法，和 CSS 中的 -webkit-transition 对应，别写成 webkitTransition（首字母小写）或 -webkit-transition（带短横线会报语法错误）。

别忘了验证行为，不只是语法

检测通过 ≠ 动画一定生效。真正容易被忽略的是：transition 需要「两个可计算的值之间变化」，且目标属性必须可动画化。

比如：height: auto → height: 200px 不会过渡；display: none → display: block 也不触发；transition: all 可能意外激活 font-family 这类不可动画属性，导致卡顿。

用 getComputedStyle(el).transition 确认样式确实被应用，而不是被 CSS 层叠覆盖或划掉（invalid）
监听 transitionend 事件时，注意 Safari 会触发两次（webkitTransitionEnd + transitionend），Chrome 只触发一次
在微信 X5 或某些定制 WebView 中，即使检测返回 true，transition 也可能静默失效，建议加一个 100ms 后检查 getComputedStyle 值是否变化的 fallback 校验