Google News
logo
AngularJS Animations
AngularJS provides animated transitions, with help from CSS. The transformation of an HTML element gives you an illusion of motion.
Are you create animations, first include the AngularJS Animate library :
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.js"></script>
Then you must refer to the ngAnimate module in your application :
<body ng-app="ngAnimate">
Example
<!DOCTYPE html>  
<html> 
<head>
<title>AngularJS Animations</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.js"></script>
<style type="text/css">
div{
  transition: all linear 0.5s;
  background-color:#0099da;
  height: 100px;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}
 
.ng-hide {
  height: 0;
  width: 0;
  background-color: transparent;
  top:-200px;
  left: 200px;
}
.site_name{ 
padding:30px 0px; 
text-align:center;
color:#FFF;
}
</style>
 
<body ng-app="myApp">
 
<h2>Hide the DIV : <input type="checkbox" ng-model="myCheck"></h2>
 
<div ng-hide="myCheck">
<h2 class="site_name">www.freetimelearning.com</h2>
</div>
 
<script type="text/javascript">
var app = angular.module('myApp', ['ngAnimate']);
</script>
 
</body>
</html>
Output :
What does ngAnimate do?

The ngAnimate module does not animate HTML elements itself. It only adds and removes some pre-defined classes to make animations when ngAnimate notice certain events, like hide or show of an HTML element.

The Following directives in AngularJS who add/remove classes :

  • ng-show
  • ng-hide
  • ng-class
  • ng-view
  • ng-include
  • ng-repeat
  • ng-if
  • ng-switch

The ng-show and ng-hide directives adds or removes a ng-hide class value.

Animations Using CSS
AngularJS animations are CSS transitions or CSS animations :
CSS Transitions
CSS transitions allows you to change CSS property values smoothly, from one value to another, over a given duration
<!DOCTYPE html>  
<html> 
<head>
<title>AngularJS CSS Transitions</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.js"></script>
<style type="text/css">
div{
  transition: all linear 0.5s;
  background-color:#0099da;
  height: 100px;
  width:100%;
}
 
.ng-hide {
  height: 0;
}
.site_name{ 
padding:30px 0px; 
text-align:center;
color:#FFF;
}
</style>
</head>
 
<body ng-app="myApp">
 
<h2>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h2>
 
<div ng-hide="myCheck">
<h2 class="site_name">www.freetimelearning.com</h2>
</div>
 
<script type="text/javascript">
var app = angular.module('myApp', ['ngAnimate']);
</script>
 
</body>
</html>
Output :
CSS Animations
CSS Animations allows .ng-hide class, the myChange animation will run, which will smoothly change the height from 100px to 0px :
<!DOCTYPE html>  
<html> 
<head>
<title>AngularJS CSS Animations</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.js"></script>
<style type="text/css">
@keyframes myChange {
  from {
      height: 100px;
  } to {
      height: 0px;
  }
}
div {
  height: 100px;
  background-color:#0099da;
}
div.ng-hide {
  animation: 0.5s myChange;
}
.site_name{ 
padding:30px 0px; 
text-align:center;
color:#FFF;
}
</style>
</head>
 
<body ng-app="ngAnimate">
 
<h2>Hide the DIV : <input type="checkbox" ng-model="myCheck"></h2>
 
<div ng-hide="myCheck">
<h2 class="site_name">www.freetimelearning.com</h2>
</div>
 
 
</body>
</html>
Output :