CSSのAnimation系Eventを持っているかのチェック
@hokacchaさんに教えてもらった方法。
document.createEventでアニメーション系のイベントを生成して、それがエラーになるかならないかで判断。
var ret = false;
['WebKit', 'O', 'Moz', ''].forEach(function(prefix) {
try {
document.createEvent(prefix + 'AnimationEvent');
ret = true;
}
catch (e) {}
}
console.log(ret);
追記。スタイルが存在するかどうかでチェックする方法もあるみたい。
http://jsdo.it/GeckoTang/1BLT
やり方はこんな感じ↓
var prop = [
'webkitTransitionProperty',
'MozTransitionProperty',
'mozTransitionProperty',
'msTransitionProperty',
'oTransitionProperty',
'transitionProperty'
],
p,
div = d.createElement('div'),
support = false;
while(prop.length){
p = prop.shift();
console.log(p+' : '+div.style[p]);
if(div.style[p] !== undefined){
support = true;
}
}
console.log(support);
support && alert(' Hello Transition ! ');
mozTransitionPropertyとMozTransitionPropertyのふたつがあるみたいなので注意。