Pause transition between views, continue on function call or event broadcast

[gildebrand]

Right now when using ui-router together with ng-animate, the process of switching views goes something like this:

1. User goes to next route ($stateChangeStart broadcasted)
2. The next view is placed in a new view holder, parallell to the the holder for the current view.
3. The next view's holder gets the class "ng-enter". The current view's holder gets the class "ng-leave".
4. Same as previous step, but with class names "ng-enter-active" and "ng-leave-active".
5. As soon as the transition from the current view to the new view is finished, the old view's holder gets removed and the new view's holder removes the classes "ng-enter" and "ng-enter-active".
6. Transition is completed ($stateChangeSuccess broadcasted)

This might not be completely accurate, since I'm new to this part of Angular (please tell me if I got something wrong).

I would like to have an option to add a "pause" option between step 3 and 4 above. But why?
A new view with new DOM was just introduced to the document, and it might (or possibly) not be finished with all the DOM changes if there is data that needs to be bound. This causes that when step 4 is reached, DOM changes are still taking place. And to animate an element while DOM changes is still taking place in that element makes the animation quite choppy, causing a non-optimal experience for the end user.

So, can I somehow pause the whole transition process between step 3 and 4 and then continue the transition whenever an event is broadcasted, or a function is called?

[wawyed]

We are having a similar issue in our project and the way we got around it was by doing event.preventDefault() in a stateChangeStart and then doing $state.go(toState, toParams, options)(since options was added to stateChangeStart not long ago). But this causes other issues such as the function that invoked $state.go might me expecting the promise to be resolved when it has been rejected to be invoked later.

I though of a mechanism to do the deferring of stateChange:

Add a defer() method to the params in stateChangeStart that returns a deferred object when called.
It would then pause the state transition until all the promises have been resolved. If any of the promises are rejected it will cancel the state transition.

If you are happy with the approach I can start working on a PR. We need this functionality ASAP in our project since is blocking us so I need to know if this is something that can be added to ui-router or we need to find a different approach.

[lee-tunnicliffe]

+1 waywed, I could use this too :)

[dblVs]

+1 waywed, I need it for my project too!

[gildebrand]

@wawyed that sounds like a great solution, that I would love to look at.

[wawyed]

@gildebrand Great, all we need is @christopherthielen or @nateabele opinion.

[christopherthielen]

Hey folks. This is unlikely to pass PR because state events are deprecated in 1.0.

1.0 hooks will offer great improvements for inserting custom promises into the transition. Note, however, that controllers for views are essentially invoked after the transition is complete as is the case in 0.2.15

[wawyed]

I understand, when can we expect to get 1.0 released?

[eddiemonge]

when this list is finished, an beta release can be made

[eddiemonge]

Closing due to chris' reasoning above. Please try out feature-1.0 to see if it will work for you.