search

zurb / foundation-apps

The first front-end framework created for developing fully responsive web apps.
http://foundation.zurb.com/apps
MIT License
1.58k stars 216 forks source link

Animation promises #730

Closed soumak77 closed 8 years ago

soumak77 commented 8 years ago

Uses promises to allow subscribing to when the animation has truly completed versus relying on an unstable timeout duration to determine when the animation has completed.

soumak77 commented 8 years ago

There is one key feature to this PR that I should explain and that is the FoundationApi.animateAndNotify method. This method internally calls FoundationApi.animate, which has been updated in this PR to return a promise. animateAndNotify waits on the promise to be completed and then fires off a notification via FoundationApi.publish stating whether the component was just activated or deactivated.

FoundationApi.animateAndNotify is not used in the foundation codebase as of this PR. In my fork, I have replaced all usage of FoundationApi.animate in the panels component with FoundationApi.animateAndNotify. This allows me to perform code immediately after the panel has closed or immediately after the panel has opened.

Since FoundationApi.animateAndNotify is not used in this PR, it could be removed from the API, however, I would not only suggest keeping the method, but would suggest using it in place of FoundationApi.animate for various components (panels being one example).

soumak77 commented 8 years ago

addresses https://github.com/zurb/foundation-apps/issues/674

soumak77 commented 8 years ago

@zurbchris do you plan on adding the anitmateAndNotify to any components so they can alert subscribers when the component has fully opened or fully closed? Perhaps an additional attribute can be added to the directive so these new messages only get sent when enabled.

zurbchris commented 8 years ago

Yes. I'm adding a new attribute zf-advise, as an option for the built in plugins. If present in the attrs it will use animateAndNotify, which may get renamed to animateAndAdvise for consistency.

zurbchris commented 8 years ago

I really like the addition of promises to animations too, bravo. I checked it out and you can easily to a .then(fn) on animations, so I tweaked your work a bit to return the element and active boolean on deferred.resolve. :+1: :+1:

soumak77 commented 8 years ago

Awesome! Not sure what else you have planned for this feature, but feel free to change anything I've done to better suit the framework.

zurbchris commented 8 years ago

Are you on gitter? I have a question you might be able to answer.