Skip to content

Commit

Permalink
Always use CSS transitions when available
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
acdha committed Aug 15, 2014
1 parent 155395c commit 2d925f8
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 9 deletions.
34 changes: 30 additions & 4 deletions source/js/Core/Core/VMM.Browser.js
Expand Up @@ -12,12 +12,17 @@ if(typeof VMM != 'undefined' && typeof VMM.Browser == 'undefined') {
this.OS = this.searchString(this.dataOS) || "an unknown OS";
this.device = this.searchDevice(navigator.userAgent);
this.orientation = this.searchOrientation(window.orientation);
this.features = {
css: {
transitions: this.cssTransitionSupport()
}
};
},
searchOrientation: function(orientation) {
var orient = "";
if ( orientation == 0 || orientation == 180) {
if ( orientation == 0 || orientation == 180) {
orient = "portrait";
} else if ( orientation == 90 || orientation == -90) {
} else if ( orientation == 90 || orientation == -90) {
orient = "landscape";
} else {
orient = "normal";
Expand Down Expand Up @@ -155,8 +160,29 @@ if(typeof VMM != 'undefined' && typeof VMM.Browser == 'undefined') {
subString: "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();
}
10 changes: 5 additions & 5 deletions source/js/Core/Core/VMM.Library.js
Expand Up @@ -429,7 +429,7 @@ if(typeof VMM != 'undefined') {
},

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,
__duration = _tdd + 's';

Expand Down Expand Up @@ -477,10 +477,10 @@ if(typeof VMM != 'undefined') {
} else {
_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,
__duration = _tdd + 's';

Expand Down

0 comments on commit 2d925f8

Please sign in to comment.