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 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

Lorinalorinda

look at example in ng-view docs...try just setting class not ng-animate docs.angularjs.org/api/ngRoute.directive:ngView – Pleasing

That wasnt the answer, but thanks for the tip on looking at the view docs, I've been mostly looking at the animate and route one. Some good examples at the bottom. – Lorinalorinda

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

Lorinalorinda

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.

Chatav

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

Manly