From 7c41a7d5e910d7c9791e61ac16c13f4d988f03ba Mon Sep 17 00:00:00 2001 From: Aleks Totic Date: Fri, 12 Oct 2012 11:34:41 -0700 Subject: [PATCH 1/3] 2 bugfixes for transform syntax --- jquery.transit.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/jquery.transit.js b/jquery.transit.js index 3ebae61..b6bbb56 100644 --- a/jquery.transit.js +++ b/jquery.transit.js @@ -310,8 +310,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; } @@ -405,7 +405,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); } From 51589f1401a9d4ebe7fedf4b4566e7c139003083 Mon Sep 17 00:00:00 2001 From: Aleks Totic Date: Fri, 12 Oct 2012 11:53:12 -0700 Subject: [PATCH 2/3] Added support for backfaceVisibility and transitionTimingFunction --- jquery.transit.js | 32 +++++++++++++++++++++++++++++++- 1 file changed, 31 insertions(+), 1 deletion(-) diff --git a/jquery.transit.js b/jquery.transit.js index b6bbb56..a728b04 100644 --- a/jquery.transit.js +++ b/jquery.transit.js @@ -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); @@ -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) { @@ -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'); From 4273dccc5d1d23705abca65b047bcb57d92d80b5 Mon Sep 17 00:00:00 2001 From: Aleks Totic Date: Fri, 12 Oct 2012 12:00:34 -0700 Subject: [PATCH 3/3] Force repaint without timeout, pull request from jquery.transit --- jquery.transit.js | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/jquery.transit.js b/jquery.transit.js index a728b04..f7208c1 100644 --- a/jquery.transit.js +++ b/jquery.transit.js @@ -609,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.