Angular JS Simple Slide Animation using ngAnimate with Ui-Router

Submitted by nurhodelta_17 on Tuesday, January 23, 2018 - 23:20.

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.

<!DOCTYPE html>
<html ng-app="app">
<head>
        <title>Angular JS Toggle Active Class on Path Change using Ui-Router</title>
        <meta charset="utf-8">
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.min.js"></script>
        <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body ng-controller="mainCtrl">
<nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                <a class="navbar-brand" href="#">SourceCodeSter</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                        <li ng-class="active('/home')"><a ui-sref="home">Home</a></li>
                        <li ng-class="active('/about')"><a ui-sref="about">About</a></li>
                        <li ng-class="active('/blog')"><a ui-sref="blog">Blog</a></li>
                </ul>
            </div>
        </div>
</nav>
<div class="container">
        <div id="views" ui-view></div>
</div>
<script src="app.js"></script>
</body>
</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

#views.ng-enter,
#views.ng-leave { 
        position:absolute; left:30px; right:30px;
    transition:0.5s all ease; -moz-transition:0.5s all ease; -webkit-transition:0.5s all ease; 
}
    
#views.ng-enter { 
    -webkit-animation:slideInRight 0.5s both ease;
        -moz-animation:slideInRight 0.5s both ease;
        animation:slideInRight 0.5s both ease; 
}
 
#views.ng-leave { 
    -webkit-animation:slideOutLeft 0.5s both ease;
        -moz-animation:slideOutLeft 0.5s both ease;
        animation:slideOutLeft 0.5s both ease;   
}
 
@keyframes slideOutLeft {
        to      { transform: translateX(-200%); }
}
@-moz-keyframes slideOutLeft {  
        to      { -moz-transform: translateX(-200%); }
}
@-webkit-keyframes slideOutLeft {
        to      { -webkit-transform: translateX(-200%); }
}
 
@keyframes slideInRight {
        from    { transform:translateX(200%); }
        to              { transform: translateX(0); }
}
@-moz-keyframes slideInRight {
        from    { -moz-transform:translateX(200%); }
        to              { -moz-transform: translateX(0); }
}
@-webkit-keyframes slideInRight {
        from    { -webkit-transform:translateX(200%); }
        to              { -webkit-transform: translateX(0); }
}

app.js

This contains our angular js script.

var app = angular.module('app', ['ui.router', 'ngAnimate']);
 
app.config(function($stateProvider, $urlRouterProvider) {
    
    $urlRouterProvider.otherwise('/home');
    
    $stateProvider
 
        .state('home', {
            url: '/home',
            templateUrl: 'home.html'
        })
              
        .state('about', {
            url: '/about',
                templateUrl: 'about.html', 
            
        })
 
        .state('blog', {
            url: '/blog',
            templateUrl: 'blog.html', 
        });
        
});
 
app.controller('mainCtrl', function($scope, $location){
        $scope.active = function(path){
                 return ($location.path() === path) ? 'active' : '';
        }
});

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

<h4>This is the Home Page</h4>
<p>See that the <b>Home Tab</b> is active</p>

about.html

<h4>This is the About Page</h4>
<p>See that the <b>About Tab</b> is active</p>

blog.html

<h4>This is the Blog Page</h4>
<p>See that the <b>Blog Tab</b> is active</p>

That ends this tutorial. Happy Coding :)

Add new comment

76 views