You just got your hands on building web applications in the world of HTML, CSS, Javascript, and AngularJS, and you are already too excited to build your new fancy websites. Then worry not, at least, about AngularJS animations, which are covered here.
But before diving into AngularJS animations, let us first learn about AngularJS and animations in detail.
AngularJS
A framework is a specific web application implementation or a platform for creating software programs. The primary purpose of the open-source front-end Javascript framework AngularJS is to create single-page apps. AngularJS, created and maintained by Google, is perhaps one of the best-known contemporary web frameworks accessible right now.
It enables you to utilize HTML as your template language and enhance HTML syntax to represent the components of your application concisely and unambiguously. Data binding and dependency injection in AngularJS allow you to write much less code than you would otherwise. And since everything takes place within the browser, any server technology may work well.
Animations
Animation is where the transformation of an HTML element gives the illusion of motion. Using animations in your application makes it more visually appealing to users.
Various types of online sites employ web animation. Small web animations appear when visitors scroll across a website to call attention to a particular aspect. Animations help showcase products and promotional content.
When an HTML element is transformed to create the appearance of motion, this is called "animation." Consumers will find such pages more aesthetically attractive if employed with animations.
AngularJS Animations
For any application, AngularJS enables expanding the HTML vocabulary. This ecosystem's results are incredibly expressive, readable, and easy to create. We can use Angular to add animations dynamically, too.
The animation effect can be created in Angular.JS using the ngAnimate module. This step also provides CSS-based animations. A dynamic motion, fade-out, and color change effect can all be created using this module.
ngAnimate Module
HTML gets transformed, and an illusion effect gets created using the ngAnimate module, and that module also provides us with a combined effect of Javascript and CSS.
The first step for bringing the animation using AngularJS into the picture is including the AngularJS animation library. The statement below is about the library of AngularJS animations.
Note: <version-info> is the AngularJS version you are running. And the Angular.JS animate lib should always be included inside the script tag.
The ngAnimate module supports animations based on CSS (transitions and keyframes) and JS-based animations via the callback hooks. Since animations are not enabled by default, we need to include ngAnimate before the animation hooks are enabled for an AngularJS app.
We have two options regarding where to write the ngAnimate module in our application.
Writing in the <body> tag … <body ng-app="ngAnimate"> …
Adding as dependency in the application module whenever the application has a name associated with it. … <body ng-app="AppName"> … <script>var app = angular.module('AppName', ['ngAnimate']);</script> …
Usage
To use ngAnimate, we can make use of any of the two different approaches given below:
CSS
JavaScript
CSS works on ngAnimate by using matching selectors and styles, and JavaScript triggers the animations registered via module.animation().
We use ngAninamte in our application with the help of directives such as ng-if, ng-show, ng-hide, etc. These directives are animation aware.
ng-hide
The ngHide module hides the element in HTML. We can hide or display based on the defined settings. The default for this setting is generally that the required content is shown or displayed before any action.
ng-show
The ngShow module allows the element to be shown in HTML. We can display or hide the content based on the defined settings. The default for this setting is generally that the content you require is hidden before any action.
Implementation
Here is a simple AngularJS animation example that we used. In this example, we have used all the required libraries to display and fade out our company logo and a small text phrase. We have used the ng-if, ng-hide, and ng-show modules here.
<!DOCTYPE html>
<html>
<style>
div {
width: 250px;
height: 90px;
}
.div2 {
width: 200px;
height: 100px;
}
.div3 {
width: 200px;
height: 100px;
}
div img {
display: block;
width: 100%;
}
.fade.ng-leave {
transition: 0.5s linear all;
opacity: 1;
}
.fade.ng-leave.ng-leave-active {
opacity: 0;
}
.animate-show-hide.ng-hide {
opacity: 0;
}
.animate-show-hide.ng-hide-add,
.animate-show-hide.ng-hide-remove {
transition: all linear 0.5s;
}
.check-element {
border: 1px solid black;
opacity: 1;
padding: 10px;
}
.animate-show-hide.ng-hide {
opacity: 0;
}
.animate-show-hide.ng-hide-add,
.animate-show-hide.ng-hide-remove {
transition: all linear 0.5s;
}
.check-element {
border: 1px solid black;
opacity: 1;
padding: 10px;
}
</style>
<body ng-app="AngularJS Animations"><center>
<h1>AngularJS Animations by Coding Ninjas </h1>
<div ng-if="bool" class="fade">
<img src="http://levelupcollege.com/wp-content/uploads/2021/10/coding-ninjas-logo-white.png" alt="logo" />
</div>
<button ng-click="bool=true">Show the Logo</button>
<button ng-click="bool=false">Hide the Logo</button>
<br><br>
<h2>First Checkbox</h2>
<input type="checkbox" ng-model="checked1" aria-label="Toggle ngShow"><br><br>
<div2 class="check-element animate-show-hide" ng-show="checked1">This text will be displayed when the checkbox is checked.</div2>
<h2>Second Checkbox</h2>
<input type="checkbox" ng-model="checked2" aria-label="Toggle ngHide"><br><br>
<div3 class="check-element animate-show-hide" ng-hide="checked2">This text will get hidden when the checkbox is checked.</div3>
<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>
<script>var app = angular.module('AngularJS Animations', ['ngAnimate']);</script>
</center>
</body>
</html>
Output
When the above code is executed, the image displayed below appears. Along with the text, two buttons are also displayed.
Before clicking:
Clicking Show the Logo Button:
The Coding Ninjas logo appears when we click the "Show the Logo" button.
Choosing the Hide the Logo option:
The Coding Ninjas logo fades out when we click the "Hide the Logo" button.
After fading out, the page goes back to its initial state.
Checking the First and Second checkboxes:
By doing so, the content will now be displayed for the first checkbox. And for the second checkbox, the content will now be hidden.
Frequently asked questions
What is animation in web development?
A web designer will utilize website animations and moving graphics to draw in visitors and frequently persuade them to complete specific activities.
Is AngularJS a genuinely open framework?
Yes. AngularJS is a JavaScript-based open-source front-end web framework.This framework is responsible for developing single-page applications. Google and a community of individuals and corporations perform the maintenance work.
Can we use Javascript for animation purposes?
Yes, Javascript animations can perform gradual programming changes in an element's style. These gradual changes are also called timers. If the interval time is less, then the animation is continuous.
What distinguishes AngularJS and ReactJS from one another?
The primary difference between AngularJS and ReactJS lies in the state of their management. AngularJS has data binding bundled in by default, whereas Redux generally augments react to give unidirectional data flow and work with immutable data.
Which library do we add to AngularJS to implement animations?
Using callbacks, the ngAnimate module supports both JavaScript- and CSS-based animations. An AngularJS app's animation hooks are activated by including ngAnimate, even if animations are not enabled by default.
Conclusion
This article gives us an idea of how animations can be used in AngularJS. Keeping theoretical knowledge at our fingertips helps us get about half the work done. To gain a complete understanding, practice is a must. You may explore some similar articles also: