heygrady / transform

jQuery 2d transformation plugin
437 stars 87 forks source link

Implementation change possibly #4

Closed crh3675 closed 14 years ago

crh3675 commented 14 years ago

I was building my own library and found yours. Thank you so much for saving me countless hours! I did have some info that may or may not be useful for your implementation. I actually found that within the jQuery library, it gets values for style attributes in the "fx.step" function. Which means you possibly don't have to proxy the animate function. My jQuery adjustments were as such:

jQuery.extend(jQuery.fx.step, { opacity: function( fx ) {
CSS3Transform.__updateTransform.call(fx.elem, fx.prop,fx.now); },

scale: function( fx ) {
   CSS3Transform.__updateTransform.call(fx.elem, fx.prop,fx.now);
},

rotate: function( fx ) {
   CSS3Transform.__updateTransform.call(fx.elem,fx.prop,fx.now);
}

});

// proxy the curCSS function so we can change how opacity is handled var proxiedCurCSS = jQuery.curCSS;

jQuery.extend({ curCSS: function( elem, name, force ) { if(name.match(/opacity|scale|rotate/)) { return CSS3Transform.__getTransform.call(elem, name);
} else {
return proxiedCurCSS.apply(elem, arguments);
} } });

Of course there is a lot more code behind the scenes but it may make the getting and setting of the properties a little cleaner.

heygrady commented 14 years ago

I went down the rabbit hole of supporting space separated values. So you can .animate({skew: '25deg 25deg'}) and that really pissed off the animate function. In jQuery 1.4.2 around line 5611, the animate function tries to convert non pixel values into pixels. So if you pass a unit on a fake property, like deg on the skew property, jQuery will be very rude and if I remember correctly it was pissing off IE and confusing the cur() function. So I hacked both of them. My basic solution was to hide units from the animate function so it wouldn't try to correct them and to force the cur() function to ask my transform object for the current position.

Feel free to submit a patch if you see a simpler way to handle this. Hacking curCSS() would only tackle half of the issue.