Browse Source

Always use CSS transitions when available

This makes a huge difference in perceptual animation quality
from ~10-20 FPS on a 1.7Ghz Core i7 to 60FPS in Chrome, Safari, Firefox,
IE11.
pull/681/head
Chris Adams 11 years ago
parent
commit
2d925f8fa0
  1. 34
      source/js/Core/Core/VMM.Browser.js
  2. 10
      source/js/Core/Core/VMM.Library.js

34
source/js/Core/Core/VMM.Browser.js

@ -12,12 +12,17 @@ if(typeof VMM != 'undefined' && typeof VMM.Browser == 'undefined') {
this.OS = this.searchString(this.dataOS) || "an unknown OS"; this.OS = this.searchString(this.dataOS) || "an unknown OS";
this.device = this.searchDevice(navigator.userAgent); this.device = this.searchDevice(navigator.userAgent);
this.orientation = this.searchOrientation(window.orientation); this.orientation = this.searchOrientation(window.orientation);
this.features = {
css: {
transitions: this.cssTransitionSupport()
}
};
}, },
searchOrientation: function(orientation) { searchOrientation: function(orientation) {
var orient = ""; var orient = "";
if ( orientation == 0 || orientation == 180) { if ( orientation == 0 || orientation == 180) {
orient = "portrait"; orient = "portrait";
} else if ( orientation == 90 || orientation == -90) { } else if ( orientation == 90 || orientation == -90) {
orient = "landscape"; orient = "landscape";
} else { } else {
orient = "normal"; orient = "normal";
@ -155,8 +160,29 @@ if(typeof VMM != 'undefined' && typeof VMM.Browser == 'undefined') {
subString: "Linux", subString: "Linux",
identity: "Linux" identity: "Linux"
} }
] ],
cssTransitionSupport: function () {
// See https://gist.github.com/jackfuchs/556448
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;
}
};
VMM.Browser.init(); VMM.Browser.init();
} }

10
source/js/Core/Core/VMM.Library.js

@ -429,7 +429,7 @@ if(typeof VMM != 'undefined') {
}, },
delay_animate: function(delay, element, duration, ease, att, callback_function) { delay_animate: function(delay, element, duration, ease, att, callback_function) {
if (VMM.Browser.device == "mobile" || VMM.Browser.device == "tablet") { if (VMM.Browser.features.css.transitions) {
var _tdd = Math.round((duration/1500)*10)/10, var _tdd = Math.round((duration/1500)*10)/10,
__duration = _tdd + 's'; __duration = _tdd + 's';
@ -477,10 +477,10 @@ if(typeof VMM != 'undefined') {
} else { } else {
_att = {opacity: 0} _att = {opacity: 0}
} }
if (VMM.Browser.device == "mobile" || VMM.Browser.device == "tablet") { if (VMM.Browser.features.css.transitions) {
var _tdd = Math.round((_duration/1500)*10)/10, var _tdd = Math.round((_duration/1500)*10)/10,
__duration = _tdd + 's'; __duration = _tdd + 's';

Loading…
Cancel
Save