EDUCBA

EDUCBA

MENUMENU
  • Blog
  • Free Courses
  • All Courses
  • All in One Bundle
  • Login
Home Software Development Software Development Tutorials AngularJS Tutorial AngularJS Animations

AngularJS Animations

Shalu Sharma
Article byShalu Sharma
Priya Pedamkar
Reviewed byPriya Pedamkar

Updated March 21, 2023

AngularJS Animations

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.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

Types of AngularJS Animations

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

types of animations

  • 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:

animation events

  • 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 :

AngularJS 1

AngularJS 2

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 :

ng repeat

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:

ng class

ng class 2

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:

ng show

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

AngularJS 7 PNG

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:

ng hide

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

AngularJS 9 PNG

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:

AngularJS 10 PNG

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

AngularJS 11 PNG

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:

AngularJS 12PNG

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

AngularJS 13PNG

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.

Recommended Articles

This has been a guide to AngularJS Animations. Here we discuss the basic concept, how does Animation Work in AngularJS? and examples. you may also have a look at the following articles to learn more –

  1. AngularJS Architecture
  2. AngularJS Unit Testing
  3. AngularJS Versions
  4. AngularJS Alternatives
All in One Excel VBA Bundle
500+ Hours of HD Videos
15 Learning Paths
120+ Courses
Verifiable Certificate of Completion
Lifetime Access
Financial Analyst Masters Training Program
2000+ Hours of HD Videos
43 Learning Paths
550+ Courses
Verifiable Certificate of Completion
Lifetime Access
All in One Data Science Bundle
2000+ Hour of HD Videos
80 Learning Paths
400+ Courses
Verifiable Certificate of Completion
Lifetime Access
All in One Software Development Bundle
5000+ Hours of HD Videos
149 Learning Paths
1050+ Courses
Verifiable Certificate of Completion
Lifetime Access
Primary Sidebar
All in One Software Development Bundle5000+ Hours of HD Videos | 149 Learning Paths | 1050+ Courses | Verifiable Certificate of Completion | Lifetime Access
Financial Analyst Masters Training Program2000+ Hours of HD Videos | 43 Learning Paths | 550+ Courses | Verifiable Certificate of Completion | Lifetime Access
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Live Classes
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

ISO 10004:2018 & ISO 9001:2015 Certified

© 2023 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

Let’s Get Started

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

By continuing above step, you agree to our Terms of Use and Privacy Policy.
*Please provide your correct email id. Login details for this Free course will be emailed to you

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA Login

Forgot Password?

By signing up, you agree to our Terms of Use and Privacy Policy.

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

Loading . . .
Quiz
Question:

Answer:

Quiz Result
Total QuestionsCorrect AnswersWrong AnswersPercentage

Explore 1000+ varieties of Mock tests View more