AngularJS Animation with Example | How to Add ng-Animate?
Free Angular course with real-time projects Start Now!!
After the AngularJS Scope, we are going to learn different ways to add and create the Animations in AngularJS with the example. Along with this, we will see how to enable or disable animation and a list of directives for animation.
AngularJS Animation
Whenever the transformation of HTML elements happens, it gives the feel of the illusion of motion, this phenomenon is known as animation. AngularJS comes with the feature of animated transitions too. With the help of CSS, AngularJS can provide animation.
The very first step for AngularJS animation is to include an animation library.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>
Then, refer ng-animate module in an application.
Do you know How to Create Modules in AngularJS?
Ways to Add ng-Animate
Ng-Animate is a module, which is used to add a class or remove a class. It is required to show the animation in your application. If you do not include an ng-animate module in your angular JS application, the animation will not be visible.
There are two ways to add ng-animate in our application
- Include it in the root element where you are using the ng-app directive.
Syntax:
<body ng-app="ngAnimate">
- Add ng-animate as a dependency
Syntax:
<script>
var demo = angular.module('demoApp', ['ngAnimate']);
</script>Where demoApp is the name given corresponding to ng-app (ng-app= “demoApp”) directive in the root element.
Work Of ng-Animate: Actually ng-Animate do not transform the HTML element, but when you are using ng-animate in your angularJS application, It notices some events HTML elements like a show or hide. To make animations, elements have some pre-defined classes.
Example of AngularJS Animation
The below code will hide the div if the checkbox is checked otherwise it will show the div.
<!DOCTYPE html>
<html>
<style>
div {
transition: all linear 0.5s;
border: 2px solid black;
height: 50px;
width: 50%;
position: relative;
top: 0;
left: 0;
}
.ng-hide {
height: 0;
width: 0;
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="ngAnimate">
<h1>Want to hide the DIV: <input type="checkbox" ng-model="ValueOfCheck"></h1>
<div ng-hide="ValueOfCheck"> Div Can Get Hidden</div>
</body>
</html>Output:
Want to hide the div
Div Can Get Hidden
When the checkbox gets checked Div gets hidden.
Let’s revise the AngularJS Event with a list of HTML event directives
List of Directives For Animation in AngularJS
- ng-show – It adds or removes an ng-show value from the DOM element.
- ng-hide – It adds or removes an ng-hide value from the DOM element.
- ng-class – It adds or removes an ng-class value from the DOM element.
- ng-view – When it enters the DOM, it adds ng-enter class and when it leaves the DOM, it adds an ng-leave class.
- ng-include – When it enters the DOM, it adds ng-enter class and when it leaves the DOM, it adds the ng-leave class.
- ng-repeat – When it enters the DOM, it adds ng-enter class and when it leaves the DOM, it adds an ng-leave class. Also, It adds ng-move to DOM elements too.
- ng-switch – When it enters the DOM, it adds ng-enter class and when it leaves the DOM, it adds the ng-leave class.
- ng-if – When it enters the DOM, it adds ng-enter class and when it leaves the DOM, it adds the ng-leave class.
AngularJS Animation in Custom Directive
We can include AngularJS animation within custom directives too by using dependency. Inject $animate in the directive created by you directly and make a call to it whenever required.
appModule.directive('custom-directive', ['$animate', function($animate) {
return function(scope, element) {
element.on('click', function() {
if (element.hasClass('clicked')) {
$animate.removeClass(element, 'clicked');
} else {
$animate.addClass(element, 'clicked');
}
});
};
}]);
AngularJS Animation on Bootstrap
Whenever angularJS application gets bootstrap, all the animation features of that application get disable by default. Ng- animate module waits till the time downloading of a template is done that starts downloading once the bootstrap process gets finished. Then, it waits for the $digest that is executing at that time and for one more. This ensures that the whole application is completed, once the animation starts executing.
But if you want to continue animation in an application, even if it bootstraps So we can do so by providing animation globally. It means in the run function of the main module.
appModule.run(function($animate) {
$animate.enabled(true);
});How to Enable Or Disable Animation in AngularJS?
We can even enable an animation or disable animation for specific elements or globally too.
Recommended Reading – AngularJS DOM with major Directives for HTML DOM
There are four ways to do so:
1. $animateProvider.customFilter()
It is called during the config phase and takes filter as the argument. It will filter animation based on the returned boolean value. If the value it returns is true, an animation will get perform otherwise animation will not get performed.
demoapp.config(function($animateProvider) {
$animateProvider.customFilter(function(node, event, options) {
return event === 'enter' || event === 'leave';
});
});2. $animateProvider.classNameFilter()
It is called during the config phase. It takes regex as the argument. This argument is matched with the class that will animate. The advantage of this strategy compares to others is that it gives speed a boost
app.config(function($animateProvider) {
$animateProvider.classNameFilter(/animate-/);
});.animate-fade-add.animate-fade-add-active {
transition: all 1s linear;
opacity: 0;
}3. $animate.enabled()
$animate.enabled(false) consist of the single boolean argument, it disables the animation globally.
$animate.enabled(myelement, false) consist of two argument. The first argument is the DOM element and the second argument is a Boolean value. It disables or enables animation on that particular element
4. OverWriting Styles
Whenever an AngularJS animation is initiated, animate applied ng-animate class on the elements for the time for which animation is about to take place. On that class to skip animation we can apply css transition styling.
.my-class {
transition: transform 4s;
}
.my-class:hover {
transform: translateY(30px);
}
my-class.ng-animate {
transition: 0s;
}Since transition: 0s is applied it will skip all the existing transition and that will not get animated again.
Explore the best way to include an HTML code in a file
Flicker
When nested elements are used with the structural animation like an ng-if inside class – based animation elements like ng-class, it may be possible that prior to the start of actual animation, a flash of content will occur. an animated element is displayed briefly whenever such a brief flicker occurs.
<div ng-class="{grey: demoOne}">
<div ng-class="{black: demoOne}">
<div class="anime" ng-if="demoOne"></div>
</div>
</div>In the above code there is a chance of flickering as ng-if animation is used inside the element with n-class animation. But we can avoid it by applying styles. Styles are applied on class ng-[event]-prepare. It is added prior to the initialization of animation but once the actual animation starts executing, it gets removed.
This class is added only for animation that are structural like enter, leave and move.
.anime.ng-enter-prepare {
opacity: 0;
}Still if flickering occurs then add some CSS styles to avoid it after it
$animate.pin
Whenever an animation starts executing ng-animate examines the animated element. Whether the animated element is inside the hierarchy of DOM elements or not. If it is outside the Dom tree, that animation will not work. Since mostly application uses root elements such as body or HTML, therefore there is less chance of occurrence of such issues.
Have a look – AngularJS Dependency Injection Components and Annotations
But if occurs, it can be resolved by using $animate.pin(element,parentHost) to associate different elements of an application. It is invoked by calling it before the animation starts. It consists of two parameters one is the element which will animate and the second parameter is the element which is supposed to be as a parent.
Summary
AngularJS Animation is a form of transformation that causes an illusion of motion. There are a number of animation available some of them are hidden, show etc. Animation makes an application easy to understand as we can actually display what is happening when you are using certain directive. So, this was all in AngularJS Animation. Still, if you have any doubt, ask freely through comments.
Did you like this article? If Yes, please give DataFlair 5 Stars on Google
Very useful And Helpful Article. Thank You For the Post.