Table of Contents
hide
Introduction of Animations in AJS
- Animations in AJS can breathe life into our web application by adding fluidity and visual appeal to various components.
- AngularJS animations are defined using CSS classes and JavaScript code.
- We can define animations in AJS for different states of our application, such as when elements enter, leave, or move within the DOM.
Definition
- AngularJS provides different types of animation effects in the form of transitions, with the help of CSS but supported by several AJS class directives.
Requirements
- To set an animation effect in an AJS application, we must include the AngularJS Animate library:-
<scriptsrc=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js”></script>
- we must also refer to the
ngAnimatemodule in our application (in two ways (i) such as <body ng-app=”ngAnimate”>, not with other app names) or (ii) when the application has a name, addngAnimateas a dependency in the array box in the application module( such as … [‘ngAnimate’]), – the most common way.
Features
- The
ngAnimatemodule is used to add and remove the directives classes of AJS. - The
ngAnimatemodule does not animate the HTML elements rather animation effect is generated with the help of CSS. - The common directives classes in AngularJS that can be added/removed as per requirements in animation programs are:-
ng-showng-hideng-classng-viewng-includeng-repeatng-ifng-switchng-enterng-leave
Advantages
- In an animation effect, there is a transformation of an HTML element which makes the presentation better and attractive through an illusion of motion.
- AngularJS animations offer much more flexibility and can be customized extensively based on our application’s needs.
AJS Animations Program Examples
Example: An AJS animation program to hide the red-colored Division section in different transition forms on clicking a Check Box.
<!DOCTYPE html>
<html>
<style>
div
{
transition: all linear 0.5s;
background-color: rgb(241, 5, 56);
height: 100px;
width: 100%;
position: relative;
top: 0;
left: 0;
}
.ng-hide
{
height: 0;
width: 0;
/* background-color: green; */
background-color: transparent;
top:-200px;
left: 200px;
}
</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="app1">
<h1>Click to Hide the Division Section : <input type="checkbox" ng-model="checkBox1"></h1>
<div ng-hide="checkBox1"></div>
<script>
var app = angular.module('app1', ['ngAnimate']);
</script>
</body>
</html>
--------------------- OR ----------------------
<!DOCTYPE html>
<html>
<style>
div
{
transition: all linear 0.5s;
background-color: red;
height: 100px;
}
.ng-hide
{
height: 0;
}
</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="app1">
<h1>Click to Hide the Division Section : <input type="checkbox" ng-model="checkBox1"></h1>
<div ng-hide="checkBox1"></div>
<script>
var app = angular.module('app1', ['ngAnimate']);
</script>
</body>
</html>Example: An AJS animation program to fade – in and out the Statement on clicking a Button.
<!DOCTYPE html>
<html ng-app="app1">
<head>
<title>AngularJS Animations Examples</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-animate.min.js"></script>
<style>
.fade-in-out.ng-enter, .fade-in-out.ng-leave
{
transition: opacity 0.5s;
}
.fade-in-out.ng-enter, .fade-in-out.ng-leave.ng-leave-active
{
opacity: 0;
}
.fade-in-out.ng-enter.ng-enter-active, .fade-in-out.ng-leave
{
opacity: 1;
}
</style>
<script>
angular.module('app1', ['ngAnimate'])
.controller('Controller1', function($scope)
{
$scope.showElement = true;
$scope.showHide = function()
{
$scope.showElement = !$scope.showElement;
};
}
);
</script>
</head>
<body ng-controller="Controller1">
<button ng-click="showHide()">Show/Hide Button</button>
<div class="fade-in-out" ng-if="showElement">
<h3>AJS Animation Program Examples to fades in and out</h3>
</div>
</body>
</html> 
0 Comments