Adding fade-in and fade-out effects in AngularJS

What You’ll Learn

How to enable animations in AngularJS
Applying fade-in and fade-out effects using ng-show and ng-hide
Using ng-if for smooth element removal
Customizing fade animations with CSS
Enhancing performance with best practices

---

1️⃣ Prerequisites: Setting Up ngAnimate

To use fade effects, you need to include ngAnimate in your project.

Step 1: Add AngularJS and ngAnimate

<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 into Your App

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

Now, you’re ready to add animations! 🚀

---

2️⃣ Applying Fade-In and Fade-Out with ng-show and ng-hide

AngularJS automatically applies .ng-hide-add and .ng-hide-remove classes when using ng-show and ng-hide.

Example: Basic Fade Effect

<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 Fade</button>
    <p class="fade" ng-show="isVisible">Hello! I'm fading in and out.</p>
</div>

app.controller('myCtrl', function ($scope) {
    $scope.isVisible = true;
});

How it Works:
✔ ng-show controls visibility.
✔ The fade class applies opacity transitions.
✔ .ng-hide sets opacity: 0 to fade out.
✔ .ng-hide-remove brings it back to opacity: 1 to fade in.

---

3️⃣ Using ng-if for Smooth Element Removal

ng-if removes elements from the DOM, whereas ng-show only hides them.

Example: Fade Effect with ng-if

<style>
.fade-enter, .fade-leave {
    transition: opacity 0.5s ease-in-out;
}
.fade-enter {
    opacity: 0;
}
.fade-enter-active {
    opacity: 1;
}
.fade-leave {
    opacity: 1;
}
.fade-leave-active {
    opacity: 0;
}
</style>

<div ng-app="myApp" ng-controller="myCtrl">
    <button ng-click="isVisible = !isVisible">Toggle Fade</button>
    <p class="fade" ng-if="isVisible">I fade in and out with `ng-if`!</p>
</div>

Key Difference:
✔ ng-show keeps the element in the DOM (just hidden).
✔ ng-if removes it completely from the DOM when false.

---

4️⃣ Fade Effect for ng-repeat Items

Example: Fade In and Out When Adding/Removing Items

<style>
.list-item.ng-enter, .list-item.ng-leave {
    transition: opacity 0.5s ease-in-out;
}
.list-item.ng-enter {
    opacity: 0;
}
.list-item.ng-enter-active {
    opacity: 1;
}
.list-item.ng-leave {
    opacity: 1;
}
.list-item.ng-leave-active {
    opacity: 0;
}
</style>

<div ng-app="myApp" ng-controller="myCtrl">
    <button ng-click="addItem()">Add Item</button>
    <ul>
        <li class="list-item" 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);
    };
});

Effect:
✔ New items fade in when added.
✔ Removed items fade out smoothly.