sliding between route transition angularjs

angularjs, ng-animate

Solution

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

Problem

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 create the effect in a slideshow but not between route transitions. Anyway code below: Nav ``` <li><a ng-click="go('/')" class = "intro currentLink navLinks">Intro</a></li> <li><a ng-click="go('/why')" class = "why navLinks">Why</a></li> <li><a ng-click="go('/resume')" class = "resume navLinks">Res</a></li> <li><a ng-click="go('/qualified')" class = "qualified navLinks">How</a></li> <li><a ng-click="go('/contact')" class = "contact navLinks">Contact me</a></li> ``` view(s) ``` <div class = "pages"> <div ng-view id="slides" ng-animate="'slide'"> <!--inside main view--> </div><!--end main view--> </div><!--end pages--> ``` css ``` .slide-leave-setup { -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-enter-setup { -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-enter-setup { position: absolute; left: 1300px; } .slide-enter-start { left: 0; } .slide-leave-setup { position: absolute; left: -1700px; } .slide-leave-start { right: 0; } ``` includes ``` <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-animate.min.js"></script> <script src="http://code.angularjs.org/1.2.3/angular-route.min.js"></script> <script src="http://code.angularjs.org/1.1.2/angular-sanitize.js"></script> <script src="js/vendor/ui-bootstrap-custom-tpls-0.6.0.js"></script> ``` javascript: ``` var app = angular.module('MyApp', ['ui.bootstrap', 'ngSanitize', 'ngRoute', 'ngAnimate']); ``` Full project at https://github.com/arttay/blizz Thank you

Original source