Обнаружить поддержку перехода с помощью JavaScript

Ответ 1

Modernizr обнаружит это для вас. Используйте эту ссылку для создания пользовательской сборки для загрузки, которая содержит только 2D и/или 3D-переходы CSS3.

После запуска вы можете либо протестировать класс csstransitions в теге html (CSS), либо в JavaScript, проверить, если Modernizr.csstransitions - true.

Дополнительные документы: http://modernizr.com/docs/#csstransitions

Ответ 2

Я также считаю, что 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

Ответ 3

Вот еще один тестовый код. Возможно, это перебор, но функция пытается установить свойство CSS для объекта DOM, а затем прочитать его.

Никогда не тестировал этот код на большом количестве экзотических браузеров, но он безопаснее, чем проверка наличия доступности CSS. Ах, да, это может отличить поддержку 2D преобразования от поддержки 3D-преобразования! Просто передайте значения свойств CSS, которые вы хотите проверить!

Плюсом этого кода является то, что он обнаруживает поддерживаемый префикс поставщика (если он есть). Возможные значения возврата:

false, когда функция не поддерживается, или

{
    vendor: 'moz',
    cssStyle: '-moz-transition',
    jsStyle: 'MozTransition'
}

когда поддерживается функция

/**
 * Test for CSS3 feature support. Single-word properties only by now.
 * This function is not generic, but it works well for transition and transform at least
 */
testCSSSupport: function (feature, cssTestValue/* optional for transition and transform */) {
    var testDiv,
        featureCapital = feature.charAt(0).toUpperCase() + feature.substr(1),
        vendors = ['', 'webkit', 'moz', 'ms', 'o'],
        jsPrefixes = ['', 'Webkit', 'Moz', 'ms', 'O'],
        defaultTestValues = {
            transition: 'left 2s ease 1s',
            transform: 'rotateX(-180deg) translateZ(.5em) scale(0.5)'
           // This will test for 3D transform support
           // Use other values if you need to test for 2D support only
        },
        testFunctions = {
            transition: function (jsProperty, computed) {
                return computed[jsProperty + 'Delay'] === '1s' && computed[jsProperty + 'Duration'] === '2s' && computed[jsProperty + 'Property'] === 'left';
            },
            transform: function (jsProperty, computed) {
                return computed[jsProperty].substr(0, 9) === 'matrix3d(';
            }
        };

    /* test given vendor prefix */
    function isStyleSupported(feature, jsPrefixedProperty) {
        if (jsPrefixedProperty in testDiv.style) {
            var testVal = cssTestValue || defaultTestValues[feature],
                testFn = testFunctions[feature];
            if (!testVal) {
                return false;
            }       

            testDiv.style[jsPrefixedProperty] = testVal;
            var computed = window.getComputedStyle(testDiv);

            if (testFn) {
                return testFn(jsPrefixedProperty, computed);
            }
            else {
                return computed[jsPrefixedProperty] === testVal;
            }
        }
        return false;
    }

    //Assume browser without getComputedStyle is either IE8 or something even more poor
    if (!window.getComputedStyle) {
        return false;
    }

    //Create a div for tests and remove it afterwards
    if (!testDiv) {
        testDiv = document.createElement('div');
        document.body.appendChild(testDiv);
        setTimeout(function () {
            document.body.removeChild(testDiv);
            testDiv = null;
        }, 0);
    }

    var cssPrefixedProperty,
        jsPrefixedProperty;

    for (var i = 0; i < vendors.length; i++) {
        if (i === 0) {
            cssPrefixedProperty = feature;  //todo: this code now works for single-word features only!
            jsPrefixedProperty = feature;   //therefore box-sizing -> boxSizing won't work here
        }
        else {
            cssPrefixedProperty = '-' + vendors[i] + '-' + feature;
            jsPrefixedProperty = jsPrefixes[i] + featureCapital;
        }

        if (isStyleSupported(feature, jsPrefixedProperty)) {
            return {
                vendor: vendors[i],
                cssStyle: cssPrefixedProperty,
                jsStyle: jsPrefixedProperty
            };
        }
    }

    return false;
}

Github: https://github.com/easy-one/CSS3test

Ответ 4

if (window.TransitionEvent){

}

Ответ 5

С помощью Modernizr 3.0 (alpha) вы можете создавать пользовательские сборки локально. Это может решить вышеупомянутую проблему "избытка", хотя я не совсем понимаю эту проблему в первую очередь (но я предполагаю ее размер). Новый api предоставляет метод 'build', в который вы можете передать json, содержащий те тесты, которые вы хотели бы включить в сборку.

Я использую что-то подобное в моем файле gulp, но gulp не нужен - прост node script.

gulp.task('js:modernizr', function() {
    var modConfig = JSON.parse(fs.readFileSync('modernizr-config.json', {
            encoding: 'utf8'
        }));
    modernizr.build(modConfig, function(res) {
        fs.writeFileSync('modernizr.js', res);
        return true;
    });
}); 

И пример файла "modernizr-config.json" будет

{
  "classPrefix": "",
  "options": [
    "addTest",
    "atRule",
    "domPrefixes",
    "hasEvent",
    "html5shiv",
    "html5printshiv",
    "load",
    "mq",
    "prefixed",
    "prefixes",
    "prefixedCSS",
    "setClasses",
    "testAllProps",
    "testProp",
    "testStyles"
  ],
  "feature-detects": [
    "css/transforms",
    "css/transforms3d",
    "css/transformstylepreserve3d",
    "css/transitions",
    "touchevents",
    "workers/webworkers",
    "history"
  ]
}

Полный файл конфигурации включен в пакет Modernizr.

При таком подходе вы можете воспользоваться хорошо поддержанным набором тестов Modernizr через инсталляторов пакетов и легко добавлять/удалять тесты по мере необходимости. Меньше тестов, очевидно, файл меньшего размера.

Параметр "setClasses" добавит связанный тестовый класс в ваш html, но вы также можете воспользоваться асинхронными событиями 3.0 следующим образом:

Modernizr.on('csstransitions', function(bool) {
    if (bool === true) // do transition stuffs
}