Javascript 使用Javascript（并且没有modernizr）检测CSS转换？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7264899/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Detect CSS transitions using Javascript (and without modernizr)?
提问by Toby Hede
How would I detect that a browser supports CSS transitions using Javascript (and without using modernizr)?
我如何检测浏览器是否支持使用 Javascript（而不使用 Modernizr）的 CSS 转换？
回答by vcsjones
Perhaps something like this. Basically it's just looking to see if the CSS transitionproperty has been defined:
也许是这样的。基本上它只是想看看是否transition已经定义了 CSS属性：
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;
}
Adapted from this gist. All credit goes there.
改编自这个要点。所有的信用都在那里。
回答by vsync
3 ways of doing so:
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
If you actually want to use the right prefixed, use this:
如果您确实想使用正确的前缀，请使用以下命令：
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';
回答by Salman von Abbas
As of 2015, this one-liner should do the deal (IE 10+, Chrome 1+, Safari 3.2+, FF 4+ and Opera 12+):-
截至 2015 年，这款单线应该可以完成交易（IE 10+、Chrome 1+、Safari 3.2+、FF 4+ 和 Opera 12+）：-
var transitionsSupported = ('transition' in document.documentElement.style) || ('WebkitTransition' in document.documentElement.style);
回答by Angolao
Here the way I used:
这里是我使用的方式：
var style = document.documentElement.style;
if (
style.webkitTransition !== undefined ||
style.MozTransition !== undefined ||
style.OTransition !== undefined ||
style.MsTransition !== undefined ||
style.transition !== undefined
)
{
// Support CSS3 transititon
}
回答by bonifaty
Also you can use the following approach (kind of one line function):
您也可以使用以下方法（一种单行功能）：
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);
