Custom views transitions

[ludinov]

Is it possible to make ui-view directive hook-able (e.g. with another custom directive in ui-view attributes or with view config) to implement custom views transitions (like github src tree navigation or mobile sliding).
Something like http://ajoslin.github.com/angular-mobile-nav/ , but with ability to amend transition behavior with js.

[ksperling]

Looks very cool. Essentially where ui-view currently just replaces the contents of a DOM node, we'd keep the old content around and leave it to an animation callback to play with.

[adamburmister]

I'd love to see this support too

[nateabele]

👍

[timkindberg]

Take a look at @matsko animation pull request: angular/angular.js#2006. It looks like animations are coming to other directives in angular via this pull request.

yearofmoo (aka matsko) says in a tweet:

The ngAnimate directive will provide animation event hooks for ngRepeat, ngShow, ngHide, ngInclude, ngView & ngSwitch

So we should look at how he's doing it and do it in a similar way for our new uiView. Perhaps @matsko could help us out as well since he's already done it once :).

[matsko]

Yup that's the plan. To provide animation hooks directly for common ng directives as well as custom directives. The animation hooks will be at core level and you can easily animate your ngView directive to have transition effects between views, make repeated elements fade in and fade out upon insert & remove, and create natural show and hide effects without the need to hack the $scope variable to bits to interface with some dhtml/jquery plugin (but yes you will still need something like jQuery, MooTools or CSS3 transitions to actually DO the animation itself, but AngularJS won't limit you to having to stick with JQuery alone).

And the great thing is that your $scope logic will stay the same ... you update your $scope variable and then the animations follow (depending on the directive that they're attached to).

The ngAnimate directive is almost done and it will be directly in the core. Not too much longer of a wait :)

BTW, that pull request is a bit old and the code there has been iterated over a bit further. So it's best to wait just a bit longer to see the final syntax of ng-repeat="...". Once it's ready then I can help you guys out with an example of how to make it work to get rid of this issue.

[adamburmister]

@matsko you're my hero, mate.

[matsko]

👍 Thanks @adamburmister :)

[timkindberg]

Cool, so we'll await your final implementation. Please, if you remember, let us know in this thread when its ready. I'm also following you on twitter so you could just tweet about it when its done too.

[matsko]

Sounds good :) Thank you for subscribing to the @yearofmoo twitter page.

[ajoslin]

Thanks @matsko, looking forward to this 😄

[klebba]

Sounds like ngAnimate is going to be quite useful; any more hints about an ETA?

[JonnyBGod]

+1

@matsko You're a hero of many men. Anxiously awaiting.