使用 Javascript（并且没有modernizr）检测 CSS 转换？

Posted 2023-03-06

【中文标题】使用 Javascript（并且没有modernizr）检测 CSS 转换？

【英文标题】：Detect CSS transitions using Javascript (and without modernizr)?

【发布时间】：2011-11-08 01:23:13

【问题描述】：

我如何检测浏览器是否支持使用 javascript（而不使用modernizr）的 CSS 过渡？

【问题讨论】：

使用minified Modernizr to test for CSS transitions only，整个代码块刚好超过2000字节。比此处发布的其他测试要大，但不足以给用户带来麻烦。 （我更喜欢 Modernizr，因为迟早每个网站都会发展壮大，并且需要不止一项测试。）

我永远无法理解人们建议提问者明确要求不要使用的东西的动机。

【参考方案1】：

也许是这样的。基本上它只是查看 CSS transition 属性是否已定义：

function supportsTransitions() 
    var b = document.body || document.documentElement,
        s = b.style,
        p = 'transition';

    if (typeof s[p] == 'string')  return true; 

    // Tests for vendor specific prop
    var v = ['Moz', 'webkit', 'Webkit', 'Khtml', 'O', 'ms'];
    p = p.charAt(0).toUpperCase() + p.substr(1);

    for (var i=0; i<v.length; i++) 
        if (typeof s[v[i] + p] == 'string')  return true; 
    

    return false;

改编自this gist。所有功劳都在那里。

【讨论】：

我为Ms => ms 提交了更改，这就是IE 公开其供应商前缀dom 样式的方式。 （他们很奇怪。）托比，你为什么要尝试做这个 sans-Modernizr？

@paul 试图降低延迟和尺寸（大幅降低），对于我们需要的这种单一检测而言，modernizer 相当大。

toby，modernizr 有一个模块化构建生成器，它可以降低文件大小。你应该看看。现在这段代码将无法检测到 IE10 中的转换支持。重新发明***就是这种情况。 ://

@vcsjones，您能否更新代码以使用ms 而不是Ms？

不知道元素内部有“样式”对象之类的东西，好东西

【参考方案2】：

3 种方法：

var supportsTransitions  = (function() 
    var s = document.createElement('p').style, // 's' for style. better to create an element if body yet to exist
        v = ['ms','O','Moz','Webkit']; // 'v' for vendor

    if( s['transition'] == '' ) return true; // check first for prefeixed-free support
    while( v.length ) // now go over the list of vendor prefixes and check support until one is found
        if( v.pop() + 'Transition' in s )
            return true;
    return false;
)();

console.log(supportsTransitions) // 'true' on modern browsers

或：

var s = document.createElement('p').style,
        supportsTransitions = 'transition' in s ||
                              'WebkitTransition' in s ||
                              'MozTransition' in s ||
                              'msTransition' in s ||
                              'OTransition' in s;

console.log(supportsTransitions);  // 'true' on modren browsers

如果你真的想使用正确的前缀，使用这个：

function getPrefixed(prop)
    var i, s = document.createElement('p').style, v = ['ms','O','Moz','Webkit'];
    if( s[prop] == '' ) return prop;
    prop = prop.charAt(0).toUpperCase() + prop.slice(1);
    for( i = v.length; i--; )
        if( s[v[i] + prop] == '' )
            return (v[i] + prop);


// get the correct vendor prefixed property
transition = getPrefixed('transition');
// usage example
elment.style[transition] = '1s';

【参考方案3】：

截至 2015 年，这个单线应该可以解决问题（IE 10+、Chrome 1+、Safari 3.2+、FF 4+ 和 Opera 12+）：-

var transitionsSupported = ('transition' in document.documentElement.style) || ('WebkitTransition' in document.documentElement.style);

【参考方案4】：

这里是我使用的方式：

    var style = document.documentElement.style;

    if (
        style.webkitTransition !== undefined ||
        style.MozTransition !== undefined ||
        style.OTransition !== undefined ||
        style.MsTransition !== undefined ||
        style.transition !== undefined
    )
    
        // Support CSS3 transititon
    

【讨论】：

检查未定义更好：typeof (style.webkitTransition) !== "undefined"

只有在不处于严格模式时才会更好，因为 undefined 可以被懒惰/调皮的人重新分配，style.webkitTransition !== void(0) 对于非严格模式使用更好（更快）...但是我们在我们的代码中都应该使用“use strict”。

【参考方案5】：

您也可以使用以下方法（一种单行函数）：

var features;
(function(s, features) 
    features.transitions = 'transition' in s || 'webkitTransition' in s || 'MozTransition' in s || 'msTransition' in s || 'OTransition' in s;
)(document.createElement('div').style, features || (features = ));

console.log(features.transitions);