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:

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:

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?

ng-animate when ng-view is updated through route

4 Answers