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

136 views