Animating view navigation forwards and backwards

Question

So, Angular 1.2 has full ng-animate support, and I've been using it for page transitions - initial setup was easy enough, awesome. Forward animations (left-to-right), no problem. Backwards navigation? Issues.

In theory it just works: see http://codepen.io/ed_conolly/pen/aubKf for an example. However, I'm trying to make it work on navigation events; $locationChangeStart, for example.

What I'm observing is that, when a page transition is initiated, Angular creates a second 'ng-view' div, then applies the class .ng-leave to the old one and .ng-enter to the new one.

The (handful of) examples I've found tell me to simply add a 'back' class to the view with an inverted animation to have it go the other way. This works... but not really.

What I'm seeing is that the 'back' class is applied to the new view only, not to the old (ng-leave-ing) one.

tl;dr:

• Am I using the wrong event? Is there an event that is triggered before the second view is created and animated in, i.e. before $locationChangeStart?
• Is it even possible to do it with an event, or do I need to call a custom helper on a navigation event? This would break the browser's own history functions, btw.
• Is it even possible to do this in vanilla Angular, or do I need angular-ui?

Answer 1

I can't see anything wrong with your example: the animation seems to work fine, both on click, and on forward/backward using the browser. I'm on Chrome, if that makes a difference.

However, a work-around to any issues with what classes are added to which ui-view, you could add the "back" class to the parent div of the views (in your example's case, the div with class viewWrap), and specify animations it in the CSS selector. So instead of

.back.container.ng-enter {
  -webkit-transform: translate3d(-100%, 0, 0);
}

wou would have

.back .container.ng-enter {
  -webkit-transform: translate3d(-100%, 0, 0);
}

(Note the space after the .back)