What You’ll Learn
What is ngAnimate?
How to enable animations in AngularJS
Animating elements with ng-show, ng-hide, and ng-class
Custom CSS-based and JavaScript-based animations
Best practices for performance
1️⃣ What is ngAnimate?
ngAnimate is an AngularJS module that provides seamless animations for various built-in directives, such as:
✔ ng-show / ng-hide
✔ ng-if
✔ ng-class
✔ ng-repeat
It allows smooth transitions when elements are added, removed, or modified in the DOM.
2️⃣ How to Enable ngAnimate?
Step 1: Include angular-animate.js
Before using ngAnimate, make sure you include it in your project.
<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>
Step 2: Inject ngAnimate in Your App Module
var app = angular.module('myApp', ['ngAnimate']);
Now, AngularJS will automatically detect animations for supported directives.
3️⃣ Using ngAnimate with Built-in Directives
Animating ng-show and ng-hide
When using ng-show and ng-hide, ngAnimate applies these CSS classes:
✔ .ng-hide-add (When hiding the element)
✔ .ng-hide-remove (When showing the element)
Example: Fade In/Out Animation
<style>
.fade {
transition: opacity 0.5s ease-in-out;
}
.fade.ng-hide {
opacity: 0;
}
.fade.ng-hide-remove {
opacity: 1;
}
</style>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="isVisible = !isVisible">Toggle</button>
<p class="fade" ng-show="isVisible">Hello, this is an animated text!</p>
</div>
app.controller('myCtrl', function ($scope) {
$scope.isVisible = true;
});
How it Works:
✔ When ng-show is true, the element fades in.
✔ When ng-show is false, the element fades out.
Animating ng-class
You can animate CSS class changes with ng-class.
Example: Changing Background Color
<style>
.bg-animation {
transition: background-color 0.5s ease-in-out;
}
.bg-red {
background-color: red;
}
.bg-green {
background-color: green;
}
</style>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="isRed = !isRed">Toggle Color</button>
<div class="bg-animation" ng-class="{'bg-red': isRed, 'bg-green': !isRed}">
Color Changing Box
</div>
</div>
app.controller('myCtrl', function ($scope) {
$scope.isRed = true;
});
The div smoothly changes its background color when the button is clicked.
Animating ng-repeat Items
When adding or removing elements in an ng-repeat, ngAnimate applies these CSS classes:
✔ .ng-enter (New item added)
✔ .ng-leave (Item removed)
Example: Adding and Removing Items with Animation
<style>
.item-animation.ng-enter {
opacity: 0;
transition: opacity 0.5s;
}
.item-animation.ng-enter-active {
opacity: 1;
}
.item-animation.ng-leave {
opacity: 1;
transition: opacity 0.5s;
}
.item-animation.ng-leave-active {
opacity: 0;
}
</style>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="addItem()">Add Item</button>
<ul>
<li class="item-animation" ng-repeat="item in items" ng-click="removeItem($index)">
{{ item }}
</li>
</ul>
</div>
app.controller('myCtrl', function ($scope) {
$scope.items = ['Item 1', 'Item 2'];
$scope.addItem = function () {
$scope.items.push('Item ' + ($scope.items.length + 1));
};
$scope.removeItem = function (index) {
$scope.items.splice(index, 1);
};
});
New items fade in, and removed items fade out smoothly.
4️⃣ Creating Custom JavaScript Animations
Apart from CSS-based animations, you can define JavaScript animations using the $animate service.
Example: Custom JavaScript Animation
app.animation('.custom-animation', function () {
return {
enter: function (element, done) {
element.css({
opacity: 0
}).animate({
opacity: 1
}, 1000, done);
},
leave: function (element, done) {
element.animate({
opacity: 0
}, 1000, done);
}
};
});
Here, jQuery or vanilla JavaScript is used to animate elements when they enter or leave the DOM.