Wizard style Next/Previous animation

[Gordon Bockus]

Hello, 

I'm working on a wizard style page where I want to have a previous/next buttons to navigate from step to step.  I'm using the ui-router and animation to add the sliding effect.  The problem I've run into is reversing the animation direction.  When the user clicks the previous button the current view uses the wrong direction class for exit.  I added a toggle button and if that is clicked then the previous button the animation is correct.  I forked the ui-router animation example to demonstrate. http://plnkr.co/edit/kSsW9T?p=preview

It seems I'd need to alter the button handler to allow digest loop after altering the scope to drive the animation class change, then calling the state transition.  Any thoughts on the cleanest way to do this are appreciated.

FWIW I also created an example using the standard router and it works out of the box: http://plnkr.co/edit/APFNx7jyfBCCmwunfOg5?p=preview

Thanks,

Gordon

[Matias Niemelä]

Hey Gordon.

From what I can see with your example is that the problem occurs when you switch between left and right (or press toggle classes). The old view still uses the former class value and does not update when the class value toggles. This is because the leave animation (just before starting) destroys the scope of the view. The ng-class change doesn't update in time because the view changes first and then the class value.

I'm not having any luck fixing this in a clean way within your example. Perhaps ui-view as well as ngView can be changed to destroy the scope after the first digest has run (since by that time ngClass will have fully resolved itself and ngAnimate will still behave the same since it too is not triggered until after the digest).

I will open create a demo tomorrow with ngView and open an issue on Github if the result is the same as with ui-view.

[Gordon Bockus]

Thanks for looking into it Matias.  Yeah the only thought I had as a work around is if there was a way to wait for a digest to complete prior to calling the $state.go.  I haven't dug into it too much as it felt like a hacky work around.

Gordon

[johntom]

http://plnkr.co/edit/cvrFCo?p=preview is a wizard plunker I adapted from http://onehungrymind.com/

HTH

John

[Gordon Bockus]

Hi John,

Thanks for the pointer.  My application currently behaves in a similar way.  The magic I'm looking for is the wizard with animation that flows both left (on next) and right (on previous).

Gordon

[Matias Niemelä]

Here's some progress on this: https://github.com/angular/angular.js/issues/6974

On Tuesday, March 25, 2014 12:54:09 PM UTC-4, Gordon Bockus wrote:

[Gordon Bockus]

Awesome.  Thanks for the update.

Gordon

On Apr 3, 2014, at 9:02 PM, Matias Niemelä <matias....@gmail.com> wrote:

Here's some progress on this: https://groups.google.com/forum/#!topic/angular/iKpRhrPr8ko

On Tuesday, March 25, 2014 12:54:09 PM UTC-4, Gordon Bockus wrote:

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/iKpRhrPr8ko/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.