Updated March 21, 2023

Introduction to AngularJS Animations

The following article provides an outline of AngularJS Animations. In AngularJS we can build animated effect with the help of CSS. This CSS will transform the HTML element that will give us the illusion of motion. If we want to create the animated motion in angular js we can use the ngAnimate module that will provide us support for CSS based animations. But here is a big question what is animation? So the animation is something that is used to give a dynamic motion effect. So here our ngAnimate gives us the combined effect of CSS and JavaScript.

Types of AngularJS Animations

We basically have three types of animations that we can implement with AngularJS which are as follows:

JavaScript animations
CSS transitions
CSS animations

Each type of animation have their own effect and they are well suited for varying context.

Types of AngularJS Animations Events

We have five some of the animation events which are as follows:

move
addCLas
removeClasds
leave
enter

Syntax:

If we want to refer nganimate module inside the body tag:

<body ng-app="ngAnimate">
ng-app="ngAnimate"

But for this we need to include some library into our project example :

src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"

And one more thing ngAnimate module removes and adds class to our HTML element.

The directive that we used to add or remove classes are as follows :

ng-show
ng-hide

Example to show the above properties:

Code:

<html>
<style>
div {
transition: 0.6s;
border-radius: 500%;
height: 100px;
width: 100px;
background-color: blue;
display: inline-block;
}
.ng-hide {
background-color: green;
top: 5px;
left: 100px;
}
</style>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js">
</script>
<body ng-app="ngAnimate">
<h4>Click checkbox to hide the circle
<input type="checkbox"
ng-model="myCheck">
</h4>
<div ng-hide="myCheck"></div>
</body>
</html>

Output :

How does it works in AngularJS?

In AngularJS, we have ngAnimate which just add or remove classes when we perform some event like hide, show. Below we have so many built-in directives available in AngularJS as they are listed below:

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

Examples to Implement AngularJS Animations

Given below are the example of AngularJS Animations:

Example #1: ng-repeat

Angular js ng-repeat is used to iterate objects a given number of times. The element on which we have used ng-repeat will be repeated one per item in a collection. But that has to be an array in order to iterate.

Code:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<h5 ng-repeat="x in records">{{x}}</h5>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = [
"content one to be displayed",
"content two to be displayed",
"content three to be displayed",
"content four to be displayed",
]
});
</script>
</body>
</html>

Output :

Example #2: ng-class

ng-class directive is used to apply CSS to HTML elements or to provide some effect or motion to HTML elements using CSS. ng-class take value as an object, array or string. If the value is a string then it should contain space separate class name, one or more names. For an array element, it can be a string or an object as described above. It can also be a combination of both. If it’s the object it should be a key-value pair, where the key is the class name and value is the Boolean, the class will only be added if the Boolean value is true.

Syntax:

<element ng-class="expression"></element>

Code:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<style>
color:white;
background-color:red;
padding:20px;
font-family:"Courier New";
}
.tomato {
background-color:blue;
padding:40px;
font-family:Verdana;
}
</style>
<body ng-app="">
<p>Choose a class to see efftect:</p>
<select ng-model="home">
<option value="sky">Red</option>
<option value="tomato">Blue</option>
</select>
<div ng-class="home">
<h1>Welcome Home!</h1>
<p>Changing color.</p>
</div>
</body>
</html>

Output:

Example #3: ng-show

The ng-show directive is used to display the html element when the value is true. otherwise, it will be hidden.

Syntax:

<element ng-show="expression"></element>

Code:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="">
Show HTML Text: <input type="checkbox" ng-model="myVar">
<div ng-show="myVar">
<h1>Welcome</h1>
<p>it will display.</p>
</div>
</body>
</html>

Output:

After clicking on the Checkbox button the output will be as given below:

Example #4: ng-hide

ng-hide directive is used to hide the HTML element only if the Boolean value is true. By default it is visible.

Syntax:

<element ng-hide="expression"></element>

Code:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="">
Hide HTML: <input type="checkbox" ng-model="myVar">
<div ng-hide="myVar">
<h1>ng-hide example</h1>
<p>This will hide</p>
</div>
</body>
</html>

Output:

After clicking on the Checkbox button the output will be as given below:

Example #5: ng-switch

This is used to hide or show the html elements depends upon the expression or value matching parameter.

Syntax:

<element ng-switch="expression">
<element ng-switch-when="value"></element>
<element ng-switch-when="value"></element>
<element ng-switch-default></element>
</element>
Supported by all

Code:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="">
Select one thing:
<select ng-model="myVar">
<option value="car">Car
<option value="choclate">Chocalte
<option value="language">language
</select>
<hr>
<div ng-switch="myVar">
<div ng-switch-when="car">
<h1>Car</h1>
<p>Welcome to a world of car.</p>
</div>
<div ng-switch-when="tuts">
<h1>Chocalte</h1>
<p>everyone favourite.</p>
</div>
<div ng-switch-when="choclate">
<h1>language</h1>
<p>Read about language.</p>
</div>
<div ng-switch-default>
<h1>Switch</h1>
<p>Need to select content.</p>
</div>
</div>
<hr>
<p>The ng-switch directive hides and shows HTML sections depending on a certain value.</p>
<p>If we select some value from dropdown so this example will change the content depending upon the expression</p>
</body>
</html>

Output:

After selecting the car option the output will be as given below:

Example #6: ng-if

ng-if directive will remove the html element if the Boolean value is false. If the value for expression is evaluated to be true then a DOM element will be added. This directive is different from ng-show and ng-hide they both hide or show the element but this will completely remove the DOM element.

Syntax:

<element ng-if="expression"></element>

Code:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="">
Demo for ng-if to show/hide: <input type="checkbox" ng-model="myVar" ng-init="myVar = true">
<div ng-if="myVar">
<h1>ng-if</h1>
<p>ng-if demo</p>
<hr>
</div>
<p>please click the checkbox to remove the content</p>
<p> This will return if check checkbox</p>
</body>
</html>

Output:

After deselecting the Checkbox button the output will be as given below:

Example #7: ng-view

ng-view directive will create the place holder for a particular view. we need to define it into the main module.

Syntax:

<div ng-app = "mainApp">
...
<div ng-view></div>
</div>

It creates the view using the script tag.

Code:

<div ng-app = "mainApp">
...
<script type = "text/ng-template" id = "add.htm">
<h2> Add employee </h2>
{{message}}
</script>
</div>

Conclusion

So AngularJS provides us ngAnimate directive to perform the animation or some effect or motion on to the HTML element but for this, we need to use CSS to see the result.

Quiz Result
Total Questions	Correct Answers	Wrong Answers	Percentage

Introduction to AngularJS Animations

Types of AngularJS Animations

Types of AngularJS Animations Events

How does it works in AngularJS?

Examples to Implement AngularJS Animations

Example #1: ng-repeat

Example #2: ng-class

Example #3: ng-show

Example #4: ng-hide

Example #5: ng-switch

Example #6: ng-if

Example #7: ng-view

Conclusion

Recommended Articles

Follow us!

APPS

Blog

Courses

Email