ng-animate : conditionally switching “back” transi

Question

Hi everyone,

reading through this google group and the fiddles and blogpost linked from there, I managed to get page transitions working with ng-animate.

Here's my Fiddle

the fiddle is nicely commented, please let me know if anything's unclear

By setting a 'transitionClass' (either .LR or .RL) on the ng-view I was able to trigger different css-transitions for every view change.

Now, what I want to do, is manually applying a "back" transition in case of changing the view one step back, no matter whether that step back is caused by a link within the app or the browser's back button.

To do so, within app.run(), I'm listening for $locationChangeStart, saving the current url slug and then checking against it on the next $locationChangeStart to determine whether we're going back one page. If that's the case, the "back" transition is applied.

This works pretty well, except for...

The entering page (.page-enter, .page-enter-active) is transitioning as expected, while the leaving page (.page-leave, .page-leave-active) seems to be stuck on the previously used transition.

I'd expect, setting a transitionClass 'LR' on the ng-view, that both pages, entering and leaving, use the css transition for '.LR page-enter' and 'LR page-leave'.

What seems to happen instead: If the transitionClass was 'ANY' before, the ng-animate will use '.LR page-enter' for the entering page and '.ANY page-leave' for the leaving page.

Reproducing the 'bug':

App starts on Page 1. Go from 1 to 2. Now go from 2 to 3, this transition is broken. Go from 3 to 1, this transition works as expected. Both transitions are 'RL' (Right To Left), so they should look the same. The only difference being that page 2 enters 'LR' while page 3 enters 'RL'. So, actually, page 1 will use the '.enter-active' transition that was originally set for page 3 when changing from 2 to 3.

Is this the expected behavior?

I'm majorly confuzzled right now, but only working with angular for the last week or so and ng-animate being relatively new feature I might very well be missing something. So before reporting a bug or anything I'd welcome any input on this.

Thanks!

Answer 1

Ok, so based on the comments I'm pretty sure you want the incoming page to also determine exit animations to apply to the outgoing page. So you really need your $locationChange code.

It also looks like the problem you are seeing is that you are setting a class on the parent independently on the incoming page but there is nothing to keep the animations waiting for this class change to occur.

The simplest fix seems to be to make the ng-animate depend on your changing variable to determine the animation class names:

<ng-view ng-animate="transitionClass"></ng-view>

then the CSS selectors just collapse into single classes:

.LR-enter-active {
  ...
}

(where transitionClass is still being set on the $rootScope in the locationChangeStart:)

 $rootScope.$on("$locationChangeStart", function (event, next, current) {
 ...

http://jsfiddle.net/9XPVX/4/