sliding between route transition angularjs

Question

I\'ve only been working with Angular for about a week, so I apologize if my code is crap.

I\'m attempting to create a sliding action between route transitions. I can cre

Answer 1

For anyone googleing this....

Add the classes ng-enter/ng-leave/.ng-enter-active/.ng-leave-active to your css classes. Example

.slide-animate.ng-enter, .slide-animate.ng-leave{
 -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
  -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
   -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
      transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
 }


.slide-animate.ng-enter.ng-enter-active {
 position: absolute;
 left: 1300px;
}

.slide-animate.ng-enter {
 left: 0;
}

.slide-animate.ng-leave.ng-leave-active {
 position: absolute;
 left: -1700px;
 }

.slide-animate.ng-leave {
 right: 0;
 }

Egghead.io also has some great video on animation if you want a in depth tutorial

Answer 2

The above answers are correct... but I would add that having routes with a trailing slash:

.when('/introduction/', ...)

Will break your transitions... Angular immediately redirects to '/introduction' which breaks the transition. so be sure to use:

.when('/introduction', ...)

Took me like 5 hours to finally determine why my transitions wouldn't work.. when my test projects and all the examples worked great.

Answer 3

If you are using Angular 1.2.x then ngAnimate directive is no longer needed. Angular animate currently uses .ng-enter and .ng-leave as hooks to add your transformations. The below article I found very helpful in learning about the new way of doing animations in just the way youre trying to accomplish ( by animating the routes aka each partial that is inserted into the ngview directive).

Animating AngularJS Apps: ngView