Using ngAnimate for animations in AngularJS

AngularJS provides a built-in module called ngAnimate that enables animations in Angular applications. It allows you to create smooth transitions and effects when elements enter, leave, or change within the DOM. This guide will walk you through the entire process of using ngAnimate in AngularJS.

Step 1: Setting Up AngularJS and ngAnimate

Before using ngAnimate, you must include AngularJS and the ngAnimate module in your project.

1.1 Include AngularJS and ngAnimate in Your Project

You can add the required libraries via CDN:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AngularJS ngAnimate Example</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>
    <link rel="stylesheet" href="styles.css">
</head>
<body ng-app="myApp">
    <div ng-controller="MainController">
        <button ng-click="toggleElement()">Toggle Box</button>
        <div class="animated-box" ng-if="isVisible"></div>
    </div>

    <script src="app.js"></script>
</body>
</html>

1.2 Initialize the AngularJS App and Inject ngAnimate

Now, in your app.js file, initialize the AngularJS application and inject ngAnimate as a dependency.

var app = angular.module("myApp", ["ngAnimate"]);

app.controller("MainController", function ($scope) {
    $scope.isVisible = false;

    $scope.toggleElement = function () {
        $scope.isVisible = !$scope.isVisible;
    };
});

1.3 Add CSS for Animations

Now, define styles and animations in styles.css:

.animated-box {
    width: 100px;
    height: 100px;
    background-color: blue;
    margin: 20px;
    transition: opacity 1s ease-in-out;
}

.ng-enter {
    opacity: 0;
}

.ng-enter-active {
    opacity: 1;
}

.ng-leave {
    opacity: 1;
}

.ng-leave-active {
    opacity: 0;
}

Step 2: Understanding ngAnimate’s Directives

2.1 How ngAnimate Works

When an element enters the DOM, AngularJS applies the .ng-enter class.
The .ng-enter-active class is added once the transition begins.
When an element is removed, .ng-leave is added, followed by .ng-leave-active for the animation.

2.2 Supported Directives

ngAnimate works with multiple directives in AngularJS, including:

ng-show / ng-hide
ng-if
ng-repeat
ng-class

Step 3: Using ngAnimate with ng-show/ng-hide

Instead of ng-if, you can use ng-show or ng-hide to apply animations.

3.1 Modify HTML to Use ng-show

<button ng-click="isVisible = !isVisible">Toggle Box</button>
<div class="animated-box" ng-show="isVisible"></div>

3.2 CSS Animations for ng-show/ng-hide

.animated-box {
    transition: opacity 1s ease-in-out;
}

.ng-hide {
    opacity: 0;
}

.ng-hide-remove,
.ng-hide-add {
    transition: opacity 1s ease-in-out;
}

Step 4: Using ngAnimate with ng-repeat

ngAnimate also works well with ng-repeat, allowing animations when adding or removing list items.

4.1 Modify HTML

<ul>
    <li ng-repeat="item in items" class="animated-item">{{ item }}</li>
</ul>

<button ng-click="addItem()">Add Item</button>
<button ng-click="removeItem()">Remove Item</button>

4.2 Update Controller Logic

app.controller("MainController", function ($scope) {
    $scope.items = ["Item 1", "Item 2", "Item 3"];

    $scope.addItem = function () {
        $scope.items.push("Item " + ($scope.items.length + 1));
    };

    $scope.removeItem = function () {
        $scope.items.pop();
    };
});

4.3 Add CSS Animations

.animated-item {
    display: block;
    padding: 10px;
    background-color: lightblue;
    margin: 5px;
    transition: all 0.5s ease-in-out;
}

.ng-enter {
    opacity: 0;
    transform: scale(0.5);
}

.ng-enter-active {
    opacity: 1;
    transform: scale(1);
}

.ng-leave {
    opacity: 1;
}

.ng-leave-active {
    opacity: 0;
}

Step 5: Using ngClass with ngAnimate

ngAnimate can also animate class changes using ng-class.

5.1 Modify HTML

<button ng-click="isHighlighted = !isHighlighted">Toggle Highlight</button>
<div class="box" ng-class="{ 'highlighted': isHighlighted }"></div>

5.2 Define CSS for Animations

.box {
    width: 100px;
    height: 100px;
    background-color: grey;
    transition: background-color 1s ease-in-out;
}

.highlighted {
    background-color: yellow;
}

Step 6: Using JavaScript-Based Animations

You can also create animations using JavaScript.

6.1 Define an Animation Module

app.animation(".fade", 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);
        }
    };
});

6.2 Use the Animation in HTML

<div class="fade" ng-if="isVisible">Fade In/Out</div>