web-dev-qa-db-ja.com

JavaScriptを使用して（modernizrを使用せずに）CSS遷移を検出しますか？

ブラウザがJavascriptを使用して（modernizrを使用せずに）CSS遷移をサポートしていることをどのように検出しますか？

javascriptcsscross-browsercss-transitions
28
Toby Hede

おそらくこのようなものです。基本的には、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 から適応。すべてのクレジットはそこに行きます。

48
vcsjones

これを行う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

OR：

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';
34
vsync

2015年の時点で、このワンライナーは取引を行う必要があります（IE 10 +、Chrome 1 +、Safari 3.2 +、FF 4+およびOpera 12+ ）：-

var transitionsSupported = ('transition' in document.documentElement.style) || ('WebkitTransition' in document.documentElement.style);
5
Salman for Hire

ここで私が使用した方法：

    var style = document.documentElement.style;

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

また、次のアプローチ（一種の1行関数）を使用することもできます。

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);
0
bonifaty