AngularJS Animations

In AngularJS, you can build animated transition with the help of CSS. The CSS transforms the HTML elements that give you an illusion of motion.

You must include the following things to make your application ready for animations:

AngularJS Animate library:

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>

Refer to the ngAnimate module in your application:

<body ng-app="ngAnimate">

AngularJS Animation Example

<!DOCTYPE html>
<html>
<style>
div {
  transition: all linear 0.5s;
  background-color: lightblue;
  height: 100px;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}
.ng-hide {
  height: 0;
  width: 0;
  background-color: transparent;
  top:-200px;
  left: 200px;
}
</style>
<script src="../ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="../ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<body ng-app="ngAnimate">
<h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
</body>

<!-- Mirrored from www.javatpoint.com/angularjs-animation by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 21 Jun 2016 08:24:27 GMT -->
</html>

Test it Now

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.

Following is a list of directives in AngularJS who add/remove classes:

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

Next TopicAngularJS Interview Questions

← prev next →

AngularJS Tutorial

Interview Questions

AngularJS Animations

AngularJS Animation Example

What does ngAnimate do?