Advance: Animations

AngularJS provides animated transitions with help from CSS. However, you must 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">

If the application already has a name, add ngAnimate as a dependency in the application module:

var app = angular.module('myApp', ['ngAnimate']);

Create a new file and add the following highlighted code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Deom</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>
.myBox {
transition: all linear 0.5s;
background-color: green;
height: 100px; width: 100%;
position: relative;
top: 0; left: 0;
}

.ng-hide {
height: 0; width: 0;
background-color: transparent;
top:0px; left:0px;
}
</style>

</head>

<body ng-app="ngAnimate">
  <h1>Show or Hide Box: <input type="checkbox" ng-model="myCheck"></h1>
  <div class="myBox" ng-hide="myCheck"></div>
</body>

</html>

Animation Demo

The ngAnimate module adds and removes classes. However, it is important to note that the ngAnimate module does not animate HTML elements, but when ngAnimate notice certain events, like hide or show of an HTML element, the element gets some pre-defined classes, which can be used to make animations.

The directives in AngularJS that are used to add/remove classes are:

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

The ng-show and ng-hide directives add or remove an ng-hide class value.

The other directives add an ng-enter class value when they enter the DOM, and an ng-leave attribute when they are removed from the DOM.

The ng-repeat directive also adds an ng-move class value when the HTML element changes position.

In addition, during the animation, the HTML element will have a set of class values, which will be removed when the animation has finished. The ng-hide directive will add these class values:

ng-animate
ng-hide-animate
ng-hide-add (if the element will be hidden)
ng-hide-remove (if the element will be showed)
ng-hide-add-active (if the element will be hidden)
ng-hide-remove-active (if the element will be showed)

Animate Using CSS

CSS transitions or CSS animations are used to animate HTML elements. They are both used to change CSS property values from one value to another over a given duration.

CSS transition

Create a new file and add the following highlighted code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</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>

<script>
  var app = angular.module('myApp', ['ngAnimate']);
</script>
       
<style>
div {
transition: all linear 0.5s;
background-color: green;
height: 100px;
}

.ng-hide {
height: 0;
}
</style>

</head>    

<body ng-app="myApp">
  <h1>Transition Box: <input type="checkbox" ng-model="myCheck"></h1>
  <div ng-hide="myCheck"></div>
</body>

</html>

Animation: Transition

CSS animation

Create a new file and add the following highlighted code:

<!doctype html>
<html>
<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>
@keyframes myChange {
from {height: 100px;}
to {height: 0;}
}

.myBox {
height: 100px;
background-color: green;
}

div.ng-hide {
animation: 0.5s myChange;
}
</style>

<body ng-app="ngAnimate">
  <p>Show / Hide Box: <input type="checkbox" ng-model="myCheck"></p>
  <div class="myBox" ng-hide="myCheck"></div>
</body>
</html>

Animation Demo 2