AngularJS Show/Hide Animation using ngAnimate

Submitted by nurhodelta_17 on Saturday, January 20, 2018 - 14:32.

Step 1 : Add Dependency

In the header portion of your HTML, add the following:

<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="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.min.js"></script>

Take note that your angular-animate version should be the same as your angular version.

Step 2 : Add Style

Include the following style.

.sample-animation {
        transition: all linear 0.5s;
}
.sample-animation.ng-hide {
        opacity: 0;
}
#alertDiv{
        margin-top: 10px;
}

Step 3 : Creating the Body

This contains our sample div to hide/show to show our animation.

<div class="container">
        <h1 class="page-header text-center">AngularJS Show/Hide Animation using ngAnimate</h1>
        <div class="text-center">
                <button type="button" class="btn btn-primary btn-lg" ng-click="show()">{{ action }}</button>
        </div>
        <div class="row" id="alertDiv">
                <div class="col-sm-6 col-sm-offset-3">
                        <div class="alert alert-success text-center sample-animation" ng-show="myAlert">
                                <button type="button" class="close" ng-click="hide()"><span aria-hidden="true">&times;</span></button>
                                This is a sample alert
                        </div>
                </div>
        </div>
</div>

Step 4 : Add the Angular JS script

Lastly, this is our angular js script.

var app = angular.module('app', ['ngAnimate']);
 
app.controller('myCtrl', function($scope){
        $scope.myAlert = false;
        $scope.action = 'Show';
 
        $scope.show = function(){
                if($scope.myAlert == false){
                        $scope.myAlert = true;
                        $scope.action = 'Hide';
                }
                else{
                        $scope.hide();
                }
                        
        }
 
        $scope.hide = function(){
                $scope.myAlert = false;
                $scope.action = 'Show';
        }
});

Don't forget to include the dependency of ngAnimate in your app.

Full HTML

<!DOCTYPE html>
<html ng-app="app">
<head>
        <title>AngularJS Show/Hide Animation using ngAnimate</title>
        <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="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.min.js"></script>
    <style type="text/css">
        .sample-animation {
                  transition: all linear 0.5s;
                }
                .sample-animation.ng-hide {
                  opacity: 0;
                }
                #alertDiv{
                        margin-top: 10px;
                }
    </style>
</head>
<body ng-controller="myCtrl">
<div class="container">
        <h1 class="page-header text-center">AngularJS Show/Hide Animation using ngAnimate</h1>
        <div class="text-center">
                <button type="button" class="btn btn-primary btn-lg" ng-click="show()">{{ action }}</button>
        </div>
        <div class="row" id="alertDiv">
                <div class="col-sm-6 col-sm-offset-3">
                        <div class="alert alert-success text-center sample-animation" ng-show="myAlert">
                                <button type="button" class="close" ng-click="hide()"><span aria-hidden="true">&times;</span></button>
                                This is a sample alert
                        </div>
                </div>
        </div>
</div>
<script>
        var app = angular.module('app', ['ngAnimate']);
 
        app.controller('myCtrl', function($scope){
                $scope.myAlert = false;
                $scope.action = 'Show';
 
                $scope.show = function(){
                        if($scope.myAlert == false){
                                $scope.myAlert = true;
                                $scope.action = 'Hide';
                        }
                        else{
                                $scope.hide();
                        }
                        
                }
 
                $scope.hide = function(){
                        $scope.myAlert = false;
                        $scope.action = 'Show';
                }
        });
</script>
</body>
</html>

That ends this tutorial. Happy Coding :)

Add new comment

195 views