使用JavaScript检测对转换的支持

Question

我想提供不同的javascript文件,具体取决于浏览器是否支持CSS3过渡.有没有比我下面的代码更好的方法来检测转换支持？

window.onload = function () {
    var b = document.body.style;
    if(b.MozTransition=='' || b.WebkitTransition=='' || b.OTransition=='' || b.transition=='') {
        alert('supported');
    } else {
        alert('NOT supported')
    }
}

Answer 1

我也认为包括Modernizr是一种矫枉过正.以下功能适用于任何功能.

function detectCSSFeature(featurename){
    var feature = false,
    domPrefixes = 'Webkit Moz ms O'.split(' '),
    elm = document.createElement('div'),
    featurenameCapital = null;

    featurename = featurename.toLowerCase();

    if( elm.style[featurename] !== undefined ) { feature = true; } 

    if( feature === false ) {
        featurenameCapital = featurename.charAt(0).toUpperCase() + featurename.substr(1);
        for( var i = 0; i < domPrefixes.length; i++ ) {
            if( elm.style[domPrefixes[i] + featurenameCapital ] !== undefined ) {
              feature = true;
              break;
            }
        }
    }
    return feature; 
}

var hasCssTransitionSupport = detectCSSFeature("transition");

灵感来自https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations/Detecting_CSS_animation_support

Answer 2

Modernizr 将为您检测到这一点。使用此链接 创建仅包含 CSS3 2D 和/或 3D 过渡的自定义下载版本。

运行后，您可以测试标签 (CSS)csstransitions上的类html，或者在 JavaScript 中测试是否Modernizr.csstransitions为true。

更多文档： http: //modernizr.com/docs/#csstransitions