Angular JS Simple Slide Animation using ngAnimate with Ui-Router

Getting Started

I've used CDN for Bootstrap, Angular JS, and Angular Animate so you need internet connection for them to work.

index.html

This is the main view of our app.
  1. <!DOCTYPE html>
  2. <html ng-app="app">
  3.         <title>Angular JS Toggle Active Class on Path Change using Ui-Router</title>
  4.         <meta charset="utf-8">
  5.         <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  6.         <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
  7.         <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
  8.         <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.min.js"></script>
  9.         <link rel="stylesheet" type="text/css" href="style.css">
  10. </head>
  11. <body ng-controller="mainCtrl">
  12. <nav class="navbar navbar-default">
  13.         <div class="container">
  14.             <div class="navbar-header">
  15.                     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
  16.                         <span class="sr-only">Toggle navigation</span>
  17.                         <span class="icon-bar"></span>
  18.                         <span class="icon-bar"></span>
  19.                         <span class="icon-bar"></span>
  20.                     </button>
  21.                 <a class="navbar-brand" href="#">SourceCodeSter</a>
  22.             </div>
  23.             <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  24.                 <ul class="nav navbar-nav">
  25.                         <li ng-class="active('/home')"><a ui-sref="home">Home</a></li>
  26.                         <li ng-class="active('/about')"><a ui-sref="about">About</a></li>
  27.                         <li ng-class="active('/blog')"><a ui-sref="blog">Blog</a></li>
  28.                 </ul>
  29.             </div>
  30.         </div>
  31. </nav>
  32. <div class="container">
  33.         <div id="views" ui-view></div>
  34. </div>
  35. <script src="app.js"></script>
  36. </body>
  37. </html>
In here we have used Bootstrap navbar to create our menus and we assign id for our ui-view where we add our animation CSS.

Add Style

Add the ff CSS to trigger our slide animation. We name this as style.css
  1. #views.ng-enter,
  2. #views.ng-leave {
  3.         position:absolute; left:30px; right:30px;
  4.     transition:0.5s all ease; -moz-transition:0.5s all ease; -webkit-transition:0.5s all ease;
  5. }
  6.    
  7. #views.ng-enter {
  8.     -webkit-animation:slideInRight 0.5s both ease;
  9.         -moz-animation:slideInRight 0.5s both ease;
  10.         animation:slideInRight 0.5s both ease;
  11. }
  12.  
  13. #views.ng-leave {
  14.     -webkit-animation:slideOutLeft 0.5s both ease;
  15.         -moz-animation:slideOutLeft 0.5s both ease;
  16.         animation:slideOutLeft 0.5s both ease;  
  17. }
  18.  
  19. @keyframes slideOutLeft {
  20.         to      { transform: translateX(-200%); }
  21. }
  22. @-moz-keyframes slideOutLeft { 
  23.         to      { -moz-transform: translateX(-200%); }
  24. }
  25. @-webkit-keyframes slideOutLeft {
  26.         to      { -webkit-transform: translateX(-200%); }
  27. }
  28.  
  29. @keyframes slideInRight {
  30.         from    { transform:translateX(200%); }
  31.         to              { transform: translateX(0); }
  32. }
  33. @-moz-keyframes slideInRight {
  34.         from    { -moz-transform:translateX(200%); }
  35.         to              { -moz-transform: translateX(0); }
  36. }
  37. @-webkit-keyframes slideInRight {
  38.         from    { -webkit-transform:translateX(200%); }
  39.         to              { -webkit-transform: translateX(0); }
  40. }

app.js

This contains our angular js script.
  1. var app = angular.module('app', ['ui.router', 'ngAnimate']);
  2.  
  3. app.config(function($stateProvider, $urlRouterProvider) {
  4.    
  5.     $urlRouterProvider.otherwise('/home');
  6.    
  7.     $stateProvider
  8.  
  9.         .state('home', {
  10.             url: '/home',
  11.             templateUrl: 'home.html'
  12.         })
  13.              
  14.         .state('about', {
  15.             url: '/about',
  16.                 templateUrl: 'about.html',
  17.            
  18.         })
  19.  
  20.         .state('blog', {
  21.             url: '/blog',
  22.             templateUrl: 'blog.html',
  23.         });
  24.        
  25. });
  26.  
  27. app.controller('mainCtrl', function($scope, $location){
  28.         $scope.active = function(path){
  29.                  return ($location.path() === path) ? 'active' : '';
  30.         }
  31. });
Notice that we have included 'ng-Animate' as the dependency for Angular Animate.

Add Path Templates

Add the ff templates for our path. home.html
  1. <h4>This is the Home Page</h4>
  2. <p>See that the <b>Home Tab</b> is active</p>
about.html
  1. <h4>This is the About Page</h4>
  2. <p>See that the <b>About Tab</b> is active</p>
blog.html
  1. <h4>This is the Blog Page</h4>
  2. <p>See that the <b>Blog Tab</b> is active</p>
That ends this tutorial. Happy Coding :)

Add new comment