Angular ngAnimate not working the first time on page load

I am using ngAnimate which works great except for the first time after loading the page.

I have some html like:

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

<!--other html here-->

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

      

        
        
        
      

    

The view is refreshed when the links are clicked using the following routing:

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 to go 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 fine, except the first time one of the links is clicked and the views are refreshed, the animation will not happen, only the content box will appear. I've noticed this in several projects I've worked on. What's happening?!