Détecter le support pour la transition avec JavaScript

Je veux servir les différents fichiers javascript en fonction de si le navigateur prend en charge CSS3 transition ou pas. Est-il un meilleur moyen de détecter de soutien à la transition que mon code ci-dessous?

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

source d'informationauteur user1087110

3

Modernizr détectera pour vous. Utilisation ce lien pour créer une version de téléchargement qui contient uniquement des CSS3 2D et/ou 3D transitions.

Une fois qu'il est exécuté, vous pouvez tester la csstransitions classe sur le html tag (CSS), ou en JavaScript, tester si Modernizr.csstransitions est true.

Plus de docs: http://modernizr.com/docs/#csstransitions

Je pense aussi, y compris Modernizr est une overkill. La fonction ci-dessous qui devrait fonctionner pour toute fonction.

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");

Inspiré par https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations/Detecting_CSS_animation_support

Voici un autre test de code. Peut-être que c'est exagéré, mais la fonction tente de définir la propriété CSS pour objet DOM et puis lisez à partir d'elle.

Jamais testé ce code sur la grande quantité de l'exotisme des navigateurs, mais il est plus sûr que la simple vérification de la propriété CSS disponibilité. Ah, oui, ça permet de les distinguer de transformation 2D soutien de transformation 3D de soutien! Il suffit de passer les valeurs des propriétés CSS que vous souhaitez tester!

Le plus de ce code est qu'il détecte le vendeur préfixe de prise en charge (le cas échéant). Valeurs de retour possibles:

falselors de la fonctionnalité non prise en charge, ou

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

lors de la fonctionnalité prise en charge

/**
* 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

0
```
if (window.TransitionEvent){
}
```
0

Avec Modernizr 3.0 (alpha), vous pouvez générer personnalisé construit localement. Cela peut résoudre le fameux "overkill" préoccupation, bien que je ne suis pas tout à fait clair sur qui concernent en premier lieu (mais je suppose que c'est la taille). La nouvelle api fournit un "build " méthode", à laquelle vous pouvez passer json contenant les tests que vous souhaitez inclure dans la construction.

Je utiliser quelque chose comme cela dans ma gorgée de fichier mais gulp n'est pas nécessaire - un nœud simple script va faire.
```
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;
});
}); 
```
Et un exemple de la " modernizr-config.json " fichier serait
```
{
"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"
]
}
```
Le plein de fichier de configuration est inclus dans le Modernizr paquet.

Avec cette approche, vous pouvez profiter du bien entretenu Modernizr suite de tests via des programmes d'installation de packages et facilement ajouter/supprimer des tests au besoin. Moins de tests, fichier plus petit évidemment.

Le "setClasses' option ajouter la classe de test dans votre code html, mais vous pouvez également profiter de la 3.0 évènements asynchrones comme suit:
```
Modernizr.on('csstransitions', function(bool) {
if (bool === true) //do transition stuffs
}
```

Vous devez vous connecter pour publier un commentaire.