Skip to content

Fixes translate(100px, undefinedpx), and transition transform #84

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
atotic wants to merge 3 commits into from
Closed

Fixes translate(100px, undefinedpx), and transition transform #84

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7c41a7d
2 bugfixes for transform syntax
atotic Oct 12, 2012
51589f1
Added support for backfaceVisibility and transitionTimingFunction
atotic Oct 12, 2012
4273dcc
Force repaint without timeout, pull request from jquery.transit
atotic Oct 12, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 36 additions & 11 deletions jquery.transit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,8 @@
support.transform = getVendorPropertyName('transform');
support.transformOrigin = getVendorPropertyName('transformOrigin');
support.transform3d = checkTransform3dSupport();
support.backfaceVisibility = getVendorPropertyName('backfaceVisibility');
support.transitionTimingFunction = getVendorPropertyName('transitionTimingFunction');

$.extend($.support, support);

Expand Down Expand Up @@ -150,7 +152,7 @@
// ## 'transition' CSS hook
// Allows you to use the `transition` property in CSS.
//
// $("#hello").css({ transition: 'all 0 ease 0' });
// $("#hello").css({ transition: 'all 0 ease 0' });
//
$.cssHooks.transition = {
get: function(elem) {
Expand All @@ -161,6 +163,34 @@
}
};

// ## 'backfaceVisibility' CSS hook
// Allows the use for `backfaceVisibilty` to hide back of transormed elements
//
// $("#hello").css({ backfaceVisibilty: 'hidden' });

$.cssHooks.backfaceVisibility = {
get: function(elem) {
return elem.style[support.backfaceVisibility];
},
set: function(elem, value) {
elem.style[support.backfaceVisibility] = value;
}
};

// ## 'transition-timing-function' CSS hook
// Allows the use for `transition-timing-function` to fine tune animation
//
// $("#hello").css({ transitionTimingFunction: 'cubic-bezier(0,0.4,0.4,0)' });
//
$.cssHooks.transitionTimingFunction = {
get: function(elem) {
return elem.style[support.transitionTimingFunction];
},
set: function(elem, value) {
elem.style[support.transitionTimingFunction] = value;
}
};

// ## Other CSS hooks
// Allows you to rotate, scale and translate.
registerCssHook('scale');
Expand Down Expand Up @@ -310,8 +340,8 @@
if (this._translateX === undefined) { this._translateX = 0; }
if (this._translateY === undefined) { this._translateY = 0; }

if (x !== null) { this._translateX = unit(x, 'px'); }
if (y !== null) { this._translateY = unit(y, 'px'); }
if (x !== null && x !== undefined) { this._translateX = unit(x, 'px'); }
if (y !== null && y !== undefined) { this._translateY = unit(y, 'px'); }

this.translate = this._translateX + "," + this._translateY;
}
Expand Down Expand Up @@ -405,7 +435,7 @@

$.each(props, function(key) {
key = $.camelCase(key); // Convert "text-align" => "textAlign"
key = $.transit.propertyMap[key] || key;
key = $.transit.propertyMap[key] || $.cssProps[key] || key;
key = uncamel(key); // Convert back to dasherized

if ($.inArray(key, re) === -1) { re.push(key); }
Expand Down Expand Up @@ -579,13 +609,8 @@
// Defer running. This allows the browser to paint any pending CSS it hasn't
// painted yet before doing the transitions.
var deferredRun = function(next) {
var i = 0;

// Durations that are too slow will get transitions mixed up.
// (Tested on Mac/FF 7.0.1)
if ((support.transition === 'MozTransition') && (i < 25)) { i = 25; }

window.setTimeout(function() { run(next); }, i);
this.offsetWidth; // force a repaint
run(next);
};

// Use jQuery's fx queue.
Expand Down