AngularJS - Animate ng-view transitions

Question

I have 2 html pages, welcome.html and login.html both of which are "inserted" into index.html dependending on the URL via an ngview attribute and router provider, as part of my AngularJS app.

An example of this can be found on the AngularJS home page under Wire up a Backend.

My question: Is there a way to animate the transition between welcome.html and login.html?

Answer 1

Angularjs 1.1.4 has now introduced the ng-animate directive to help animating different elements, in particular ng-view.

You can also watch the video about this new featue

UPDATE as of angularjs 1.2, the way animations work has changed drastically, most of it is now controlled with CSS, without having to setup javascript callbacks, etc.. You can check the updated tutorial on Year Of Moo. @dfsq pointed out in the comments a nice set of examples.

Answer 2

Check this code:

Javascript:

app.config( ["$routeProvider"], function($routeProvider){     $routeProvider.when("/part1", {"templateUrl" : "part1"});     $routeProvider.when("/part2", {"templateUrl" : "part2"});     $routeProvider.otherwise({"redirectTo":"/part1"});   }] );  function HomeFragmentController($scope) {     $scope.$on("$routeChangeSuccess", function (scope, next, current) {         $scope.transitionState = "active"     }); } 

CSS:

.fragmentWrapper {     overflow: hidden; }  .fragment {     position: relative;     -moz-transition-property: left;     -o-transition-property: left;     -webkit-transition-property: left;     transition-property: left;     -moz-transition-duration: 0.1s;     -o-transition-duration: 0.1s;     -webkit-transition-duration: 0.1s;     transition-duration: 0.1s }  .fragment:not(.active) {     left: 540px; }  .fragment.active {     left: 0px; } 

Main page HTML:

<div class="fragmentWrapper" data-ng-view data-ng-controller="HomeFragmentController"> </div> 

Partials HTML example:

<div id="part1" class="fragment {{transitionState}}"> </div>