ng-animate when ng-view is updated through route

Question

I try to animate the change of a ng-view div in AngularJS.

So my div inside my index.html file looks like:

<div ng-view></div>

I have another html-file (view1.html) with just divs inside.

My app.js with the routing looks like:

app.config(function($routeProvider) {
$routeProvider
    .when('/sites/:templateID',
    {
        controller: 'simpleController',
        templateUrl:'templates/question.html'
    })
});

I am changing the path with a click on a button, and call this:

$location.path("/sites/" + nextID);

The URL changes of the site, and only the ng-view-div gets updated. But when i am applying a ng-animation to it:

<div class="content" data-ng-view ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}"></div>

It doesn't work. I included AngularJS 1.2.5, the animate-js file inside my index.html and also my CSS:

.animate-enter, .animate-leave {
  -webkit-transition:all 2s ease;
  -moz-transition:all 2s ease;
  -o-transition:all 2s ease;
  transition:all 2s ease;
}

.animate-enter {
    left: -100%;
}

.animate-enter.animate-enter-active {
    left: 0;
}

.animate-leave {
    left: 0;
}

.animate-leave.animate-leave-active {
    left: 100%;
}

Is there a way to animate the ng-view change through route-(URL)-changing?

Answer 1

Just to add to the accepted answer it is necessary to either define position: absolute or display: block to .ng-enter and .ng-leave. I struggled with this for a while when trying to fade in ng-view on route change and didn't want to use absolute positioning. Example without browser prefixes for transition:

//add animate class to ng-view

//css
.animate.ng-leave, .animate.ng-enter { 
    transition: 1s cubic-bezier(0.5, 0.1, 0.25, 1) all;
}
.animate.ng-enter, .animate.ng-leave.ng-leave-active {
    opacity: 0;
    display: block;
}
.animate.ng-leave, .animate.ng-enter.ng-enter-active {
    opacity: 1;
    display: block;
}

For my specific situation I removed the transition from ng-leave so there wouldn't be overlap of elements which would cause one to be pushed down due to block display.