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 :
4.5 (7,663 ratings)
View Course
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.
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 –
