search

jquery / jquery

jQuery JavaScript Library
https://jquery.com
MIT License
58.96k stars 20.62k forks source link

1.8 effects #731

Closed gnarf closed 12 years ago

gnarf commented 12 years ago

So - I don't feel like this branch is by any means DONE... I just want an easy way for people to look at what I'm doing and discuss it. It currently passes all jQuery core unit tests in chrome so I figure its time to share it on a wider scale. It currently weighs in around 150 bytes more than the current core after min and gzip.

jQuery 1.8 Effects

To quote my own summary from an email thread:

My goal in the end is to have a plugin to sit alongside jQuery 1.8 (like jQuery.color.js) which implements animations that CAN be done with transitions or css animations, yet lets all the "complex" animations fall through to the default provider in jQuery core. This would allow you to define your animations in terms of CSS animation / transition style apis, and know that if the browser can't support CSS3, jQuery core will be doing what its doing now. This plugin may or may not find its way into UI Effects Core as jQuery.color already has.

General organization

jQuery.Animation is a new function which implements most of what our current doAnimation function hiding inside jQuery.fn.animate currently does. It returns an animation object which has the standard promise methods ( .done() and .fail() ) plus a helper called .finished() to publish its state information to the outside world. fail() functions will be called with a boolean gotoEnd whenever someone .stop()s the animation. .done() functions will NOT be called on .stop( gotoEnd ) but will be called whenever the animation comes to its natural completion. .finish() functions will be called whenever the animation completes - regardless of it had been .stop()ed.

jQuery.Tween is very similar to the old jQuery.fx (so much so that it is being used as such for backwards-compat). It handles the actual easing/get/set operations for a single element and property from 0% to 100%. Animations contain an array of Tweens that will be updated when their tick function is called.

New hook points

jQuery.Animation.preFilter( function( element, props, opts ) {})

Pre-filters allow a plugin to look at the props and opts of an animation being created and overide some default functionality, or do something else entirely with it. The hide / show special case preFilter in the code is a good example. It creates its own tweens for the hide and show scope to retain access to in the finish() callbacks it attaches to hook all of timmy's fxstop goodness together. Pre-filters are allowed to return their own object so long as it implements .stop( gotoEnd ), and .finish(). jQuery.fn.animate will be none the wiser.

jQuery.Animation.tweener( propsList, function( property, value ) {})

Allows you to peek at the property/value combinations and decide how to create a tween for that property or value. It should return truthy if it created the tween. If you want the tween to be managed by the animation you should use the animation.createTween( property, value ) helper, or push your own object containing a run( percent ) function to animation.tweens array.

jQuery.Tween.propHooks[ property ]

A { get: function( tween ) {}, set: function( tween ) {} } hook point for individual properties with a _default that uses jQuery.css and element.style

Current Issues

jaubourg commented 12 years ago

I'm in Dominican Republic right now, completely sun toasted and in pain with a very weak internet access. I'll be sure to check on this once I get back (end of the coming week).

gnarf commented 12 years ago

After style tweaks and finding a possible use of options.step that didn't work and hacking that back in - Its weighs +306 now.

rwaldron commented 12 years ago

+306 for a complete rewrite draft is pretty incredible

rwaldron commented 12 years ago

Wait, is that +306 from 1.8pre? Or +306 after making the changes?

gnarf commented 12 years ago

Eh - I was hoping that it would shrink @rwldrn ... There are still a few places I think I can shrink now.

rwaldron commented 12 years ago

Nice! If I come up with any good reduction strategies, I'll ping you.

gnarf commented 12 years ago 
jQuery Size - compared to last make
  252237   (+990) jquery.js
   94087   (+497) jquery.min.js
   33551   (+291) jquery.min.js.gz

Back under 300... Based on the base commit of this branch ( 1.8pre -> 1.8-effects )

gnarf commented 12 years ago

The last commit solves the issue I had posted in the original (now edited) PR Summary:

gnarf commented 12 years ago

At this point the Red Lines in the overall diff are becoming a hassle... Check out my blog post for a solution to hide all the red lines in a github diff for an easier time reviewing big stuff like this.

For those of you too lazy to read the post, open up the console and run this short jQuery to hide all the red lines:

$("div.diff-view tr .gd").closest("tr").toggle().length;
gnarf commented 12 years ago

Also - now with vendor prefix support thanks to .cssProps and @mikesherov

gibson042 commented 12 years ago

-84 bytes min+gzip

rwaldron commented 12 years ago

M-F'ing Teamwork... FOR THE WIN.

dmethvin commented 12 years ago

I just want to tell you both good luck. We're all counting on you.

gnarf commented 12 years ago 
jQuery Size - compared to last make
  251977   (+730) jquery.js
   93979   (+389) jquery.min.js
   33480   (+220) jquery.min.js.gz
jQuery build complete.
gibson042 commented 12 years ago

I found a few more bytes by reimplementing finished with jQuery.Callbacks: 584fc9b8f1ec12c7c89d44c161e2a96ba77d48ae

It works for me locally and seems right, but there might be another gotcha hiding in there. Thoughts?

gibson042 commented 12 years ago

12 more... 5fb3dbb077b2e91ada8a14155598e6694cbaae85

gibson042 commented 12 years ago

8 more, and I'm done (for now): fae8255d6e66cc7f9cda5486722033e55aded930

gnarf commented 12 years ago

After @gibson042's epic work:

jQuery Size - compared to last make
  252008   (+761) jquery.js
   93987   (+397) jquery.min.js
   33455   (+195) jquery.min.js.gz
gibson042 commented 12 years ago

feel free to subtract 13 more: 6ad87a5eec9e5867b0c60c58446842bd4d3aae45 :D

gnarf commented 12 years ago

@staabm see 488e7ec6eda2e03250f394504a4c13b53763fc82 for the undoing of that call.

gnarf commented 12 years ago

Merged @gibson042 1.8-effects - epic work man.

gibson042 commented 12 years ago

I just can't quit... 1 last byte and a faster .show: dd4b3822d127d2e5c8a0c841f39dbb4595b9103c

gibson042 commented 12 years ago

I like the concept a lot, and was hoping something like that would work. Let me know when you're ready for more eyes on it.

mikesherov commented 12 years ago

It'll, work, I just munged the logic. Updating soon. It'll work. It's only 8 bytes now.

gnarf commented 12 years ago

Merged in @gibson042 dd4b382 -- @mikesherov I had a merge conflict trying to merge up to c839079, think you could rebase em?

mikesherov commented 12 years ago

Will do.

On Fri, Apr 20, 2012 at 10:31 AM, Corey Frang < reply@reply.github.com

wrote:

Merged in @gibson042 dd4b382 -- @mikesherov I had a merge conflict trying to merge up to c839079, think you could rebase em?

Reply to this email directly or view it on GitHub: https://github.com/jquery/jquery/pull/731#issuecomment-5245195

gnarf commented 12 years ago

Added a new "Issue" to the pull:

gibson042 commented 12 years ago

5 more from a2d4fe777d17ccb3ba69e4e5e57f200982df9bc3

mikesherov commented 12 years ago

Rebased: https://github.com/mikesherov/jquery/commit/ad881e67454374ff6eb1bbaacda94df7bbf4ef06 - 10 bytes https://github.com/mikesherov/jquery/commit/45547c35539b6bb5dcf9a33ecd7974b1dc3f37c9 - 6 bytes https://github.com/mikesherov/jquery/commit/58b8d7cb3701f52feab9d211a580ac0110ee0f09 - 8 bytes

gnarf commented 12 years ago

Merged with @mikesherov's branch

gnarf commented 12 years ago

Team Effort FTW:

jQuery Size - compared to last make
  251450   (+203) jquery.js
   93799   (+209) jquery.min.js
   33416   (+156) jquery.min.js.gz
gibson042 commented 12 years ago

tweak @mikesherov's new genFx for 12 bytes: 38d5eefb4710c26c10af7b787bb6ef83cbae89cb

gnarf commented 12 years ago

Pulled @gibson042 's genFx tweak in

mikesherov commented 12 years ago

found 4 more bytes: 0b23ca0203fcbd5f93c69d0e6a471638ca5766ce

gibson042 commented 12 years ago

Can you explain in more detail the "special easing" issue?

gnarf commented 12 years ago 
jQuery Size - compared to last make
  253180   (+345) jquery.js
   93963   (+208) jquery.min.js
   33454   (+156) jquery.min.js.gz
gnarf commented 12 years ago

1.8-effects to ground control. @dmethvin do we have clearance to land?

dmethvin commented 12 years ago

Landed in 1.8pre: 58ed62ed12cb48d9224f699e86e197804ca5ece4

Cigars all around!