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.38k stars 197 forks source link

Adding step support for all possible CSS2/3 properties #81

Open SineSwiper opened 12 years ago

SineSwiper commented 12 years ago

I'm basically fielding some possible locations for my existing 'clip' step code, and I'd like to eventually branch this into most of the existing CSS properties that take numeric fields.

Maybe I should ask if that would be within the scope of your module, or would it need to be more specify than that. I don't want to start usurping what you already might have as a vision for your module, but based on the name and existing code, this seems like the right place for my goal.

So, are you interested in accepting some code for this venture?

benbarnett commented 12 years ago

This sounds good, do you have any examples for how this could work/integrate into the plugin?

SineSwiper commented 12 years ago

Yeah, it would basically just be extending the $.animate.step functions to the different CSS properties. I've already done clip, and I'm mapping out which other CSS properties would need work. I think the first step would be implementing a good test platform that would try out each (plausible) CSS property, see if it animates correctly, and fix the ones that don't work.

I noticed that you actually re-define $.animate. What is different about it versus jQuery core and UI?

benbarnett commented 12 years ago

Yeah that sounds really good - its the biggest 'gap' in the functionality for the plugin.

Yep, so the plugin 'overloads' the $.animate() method. Basically it checks for CSS transition support, and if its there, it'll use the plugins new transformation code, but taking the same parameters/API as the native method. If its unsupported, it'll just pass the call back to the original/core jQuery method.

I think UI only adds things to the core, but I'm not entirely sure without looking a bit closer. It doesn't play too well with animate-enhanced though...

SineSwiper commented 12 years ago

Okay, since I use JQUI quite a bit, I'll see about making sure it can play nice with each other. I think another (separate) venture would be reimplementing some of their animation methods using clip, instead of the "wrapper DIV" method they are using right now. The latter doesn't seem to play nice with certain layouts.

Also, JQUI has the other easing methods, so it should enhance animate in that regard. I'm sure we can figure out a way for all three of them to play nice with each other.

I've completed the CSS property research, so I'll see about creating some sort of Wiki table for that in a few.

benbarnett commented 12 years ago

Sounds great. The JQUI stuff does technically work, but sometimes the animations are too fast. "Bounce" for example breaks because this plugin doesn't catch the 'transitionEnd' events quick enough, and then the values get out of joint.It should be fixable, but I can't work out if its the browsers not firing events quickly enough, or if the plugin isn't managing them properly.

Looking forward to seeing more on it. The step functionality would be awesome.

SineSwiper commented 12 years ago

https://github.com/SineSwiper/jQuery-Animate-Enhanced/wiki/CSS-Property-List