title: sliding between route transition angularjs
body: <p>I've only been working with Angular for about a week, so I apologize if my code is crap.</p>
  
  <p>I'm attempting to create a sliding action between route transitions. I can create the effect in a slideshow but not between route transitions.</p>
  
  <p>Anyway code below:
  Nav</p>
  
  <pre><code>&lt;li&gt;&lt;a ng-click="go('/')"  class = "intro currentLink navLinks"&gt;Intro&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a ng-click="go('/why')"  class = "why navLinks"&gt;Why&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a ng-click="go('/resume')" class = "resume navLinks"&gt;Res&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a ng-click="go('/qualified')" class = "qualified navLinks"&gt;How&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a ng-click="go('/contact')" class = "contact navLinks"&gt;Contact me&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>view(s)</p>
  
  <pre><code>&lt;div class = "pages"&gt;
      &lt;div ng-view id="slides" ng-animate="'slide'"&gt;
          &lt;!--inside main view--&gt;
      &lt;/div&gt;&lt;!--end main view--&gt;
  &lt;/div&gt;&lt;!--end pages--&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>includes</p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.js"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-animate.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.angularjs.org/1.2.3/angular-route.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.angularjs.org/1.1.2/angular-sanitize.js"&gt;&lt;/script&gt;
  &lt;script src="js/vendor/ui-bootstrap-custom-tpls-0.6.0.js"&gt;&lt;/script&gt; 
  </code></pre>
  
  <p>javascript:</p>
  
  <pre><code>var app = angular.module('MyApp', ['ui.bootstrap', 'ngSanitize', 'ngRoute', 'ngAnimate']);
  </code></pre>
  
  <p>Full project at <a href="https://github.com/arttay/blizz" rel="nofollow">https://github.com/arttay/blizz</a></p>
  
  <p>Thank you</p>