search

benbarnett / jquery-animate-enhanced

Extend $.animate() to detect CSS transitions for Webkit, Mozilla, IE>=10 and Opera and convert animations automatically.
http://playground.benbarnett.net/jquery-animate-enhanced/
MIT License
1.39k stars 196 forks source link

'avoidTransforms' disables css transitions ? #122

Closed commonpike closed 11 years ago

commonpike commented 11 years ago

From the description I got the impression that 'avoidTransforms' still applies css animations, but only using the classic 'top', 'left' etc. (instead of 'transform:translate', etc).

I want this, because the css transforms seem to get a subpixel off when combined with transform:scale on a higher element, but the css animations still perform better, even with top and left.

In practice, 'avoidTransforms' seems to revert to default jquery animations, just like 'avoidCSSTransitions' does.

I wrote a fiddle http://jsfiddle.net/pike/KDn9Q/

You can inspect the squares to see what happens if you click on them ... Is this a bug, or am I reading the docs wrong ? Those double negatives ('avoid':false) make my brain bubble.

*-pike

benbarnett commented 11 years ago

I know what you mean about the double negatives... it does my brain in too after not using it for a while. It'll introduce breaking changes though, so we may be stuck with it.

You're correct in your understanding of avoidTransforms. However your fiddle (thanks for that) has shown that it's not working as expected.

I'll take a look.

benbarnett commented 11 years ago

There's still an issue on the fiddle, but I think that's partly due to the plugin not loading properly from Github.

Please see working demo/test here: http://playground.benbarnett.net/jquery-animate-enhanced/tests/visual-avoidTransforms.html

benbarnett commented 11 years ago

Re-open if you find issues still!

commonpike commented 11 years ago

awesome, and just in time ! I will test this in my project and .. not respond here if it works well !

thanks so much ! *-pike

commonpike commented 11 years ago

Hm, I'm back :-)

The fiddle seems to be picking up the changes from Github, and yes, things did change. using 'avoidTransform:true' now does css transitions. But it does weird things, too.

If you go back to the fiddle (I changed it a bit) http://jsfiddle.net/pike/KDn9Q/

and click on the green square once - thats with css transforms and works as intended. now click on the red square once. its different. now click again a few times. hm..

what happens is that the green squares top gets added by 100 on every click. the red squares top instead gets set to 100 on the first click, and refuses any subsequent calls.

if you inspect the red square, you'll find that animations are stacking up, like -webkit-transition: top 400ms ease-in-out, top 400ms ease-in-out, top 400ms ease-in-out, top 400ms ease-in-out, top 400ms ease-in-out, top 400ms ease-in-out, top 400ms ease-in-out, top 400ms ease-in-out, top 400ms ease-in-out, top 400ms ease-in-out, top 400ms ease-in-out, top 400ms ease-in-out, top 400ms ease-in-out;, as if 'top' isnt getting set at all anymore. in the console you can see what i'm pushing into the 'animate' call.

I have no clue whats wrong - you ?

thanks! *-pike