Implementing smooth transitions using ng-enter and ng-leave

What You’ll Learn

Understanding ng-enter and ng-leave
Creating smooth animations with ngAnimate
Applying transitions for ng-show, ng-hide, and ng-if
Animating elements inside ng-repeat
Best practices for performance

---

1️⃣ Prerequisites: Setting Up ngAnimate

Before we implement smooth transitions, we need to enable animations in AngularJS.

Step 1: Include 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, ngAnimate is enabled, and we can create smooth transitions.

---

2️⃣ How ng-enter and ng-leave Work

AngularJS automatically adds animation classes when elements are added or removed.

Animation Class	When It’s Used
ng-enter	When an element is added to the DOM (ng-if, ng-repeat)
ng-leave	When an element is removed from the DOM (ng-if, ng-repeat)
ng-hide-add / ng-hide-remove	When ng-show or ng-hide toggles visibility

Example: Basic Fade In and Fade Out

<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 smoothly!</p>
</div>

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

How it Works:
✔ When isVisible is true, ng-enter triggers fade-in animation.
✔ When isVisible is false, ng-leave triggers fade-out animation.

---

3️⃣ Applying Transitions to ng-show and ng-hide

Unlike ng-if, ng-show and ng-hide keep elements in the DOM but change visibility.

Example: Smooth Visibility Transition

<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 Visibility</button>
    <p class="fade" ng-show="isVisible">I smoothly appear and disappear!</p>
</div>

Difference Between ng-if and ng-show
✔ ng-show keeps the element in the DOM but toggles opacity.
✔ ng-if removes the element from the DOM and triggers ng-enter / ng-leave.

---

4️⃣ Animating Elements Inside ng-repeat

When adding or removing items from a list, AngularJS applies ng-enter and ng-leave.

Example: Animated List 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);
    };
});

What Happens?
✔ New items fade in (ng-enter).
✔ Removed items fade out (ng-leave).
✔ Clicking an item removes it with animation.

---

5️⃣ Advanced Transitions with Scaling Effects

We can combine fade and scale effects for a more engaging transition.

Example: Scale & Fade Effect

<style>
.box.ng-enter, .box.ng-leave {
    transition: all 0.5s ease-in-out;
}
.box.ng-enter {
    opacity: 0;
    transform: scale(0.8);
}
.box.ng-enter-active {
    opacity: 1;
    transform: scale(1);
}
.box.ng-leave {
    opacity: 1;
    transform: scale(1);
}
.box.ng-leave-active {
    opacity: 0;
    transform: scale(0.8);
}
</style>

<div ng-app="myApp" ng-controller="myCtrl">
    <button ng-click="showBox = !showBox">Toggle Box</button>
    <div class="box" ng-if="showBox">Scaling & Fading Effect!</div>
</div>

What Happens?
✔ The box scales and fades in when shown (ng-enter).
✔ The box scales down and fades out when hidden (ng-leave).