[JavaScript] ブラウザの「-webkit-」などのベンダープレフィックスを取得する

JavaScriptでスタイルを指定する際に、「-webkit-」などのベンダープレフィックスをつけないといけないことがあるんだけど、主要ブラウザそれぞれに対応したスタイルを設定するのも馬鹿らしいので、JavaScriptで自動でつけたい。iScrollで使われていたコード。

view plainprint?

1. //↓こんなのは面倒なので…  
2. elem.style.WebkitTransaction = 'all 100ms linear';  
3. elem.style.MozTransaction = 'all 100ms linear';  
4. elem.style.OTransaction = 'all 100ms linear';  
5.   
6. //自動でプレフィックスを取得する  
7. var vendor = (/webkit/i).test(navigator.appVersion) ? 'webkit' : (/firefox/i).test(navigator.userAgent) ? 'Moz' : 'opera' in window ? 'O' : '';  
8.   
9. //↓こういうふうに使う  
10. elem.style[vendor + 'Transaction'] = 'all 100ms linear';  

//↓こんなのは面倒なので…
elem.style.WebkitTransaction = 'all 100ms linear';
elem.style.MozTransaction = 'all 100ms linear';
elem.style.OTransaction = 'all 100ms linear';

//自動でプレフィックスを取得する
var vendor = (/webkit/i).test(navigator.appVersion) ? 'webkit' : (/firefox/i).test(navigator.userAgent) ? 'Moz' : 'opera' in window ? 'O' : '';

//↓こういうふうに使う
elem.style[vendor + 'Transaction'] = 'all 100ms linear';

アニメーションが終わるタイミングで起きるイベント「transitionEnd」はfirefoxだけプレフィックスつかないので注意。なんでそんなことすんの…

chrome, safari -> webkitTransitionEnd
oper -> otransitionEnd
firefox -> transitionend(※全部小文字)

参考：
iScroll
CSS transitions