Angular ngAnimate not working first time on page load

Question

I'm using ngAnimate which works great except for the first time after page load.

I have some html like this:

<a href="#newcontent"></a>

<!--other html here-->

<div class="content" ng-view></div>

The view updates when links are clicked using routing like so:

app.config(function($routeProvider) {
  $routeProvider

  .when('/newcontent', {
    templateUrl : 'views/new-content.html',
    controller  : 'ContentCtrl'
  });
});

Now I have my CSS setup to animate the content box so it slides in and out.

.content.ng-enter,
.content.ng-leave {
  -webkit-transition: all 600ms cubic-bezier(.3,1,.5,1);
  transition: all 600ms cubic-bezier(.3,1,.5,1); }

.content.ng-enter,
.content.ng-leave.ng-leave-active {
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%); }

.content.ng-enter.ng-enter-active,
.content.ng-leave {
  -webkit-transform: translateY(0%);
  -moz-transform: translateY(0%);
  -o-transform: translateY(0%);
  transform: translateY(0%); }

Note that this all works perfectly except the first time one of the links is clicked and the view updates, the animation does not happen, the content box just appears. I've noticed this on more than one project I've worked on now. What's happening?!

Answer 1

Update:

It looks like working properly again in v1.3.10.

Original answer:

I've just run into this problem after upgrading angular (and angular-animate) to v1.3.8. Reverting back to v1.2.28 made this work again. (Albeit I'm using Javascript animations instead of class based ones.) I'm not sure if it's an intended change or a bug, maybe someone with deeper knowledge of angular and the changelog could provide further info on this...