Handling animation callbacks in AngularJS

What You’ll Learn

How to handle animation callbacks in AngularJS
Using $animate service for event-based animations
Detecting when animations start and end
Best practices for performance optimization

---

1️⃣ Why Use Animation Callbacks?

In AngularJS, animations occur asynchronously, and sometimes, you need to trigger actions after an animation completes, such as:
✔ Showing an alert after a fade-in
✔ Performing a database update after a slide-in
✔ Logging events when animations start and end

---

2️⃣ Using $animate Service for Callbacks

AngularJS provides the $animate service, which allows you to listen for animation events.

Step 1: Include 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 $animate in Controller

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

app.controller('MainCtrl', function ($scope, $animate, $element) {
    $scope.showMessage = false;

    $scope.toggleMessage = function () {
        $scope.showMessage = !$scope.showMessage;
    };

    // Listen for animation completion
    $scope.$watch('showMessage', function (newValue) {
        var targetElement = angular.element(document.querySelector('.fade-animation'));

        if (newValue) {
            $animate.enter(targetElement).then(function () {
                console.log('Fade-in animation completed!');
            });
        } else {
            $animate.leave(targetElement).then(function () {
                console.log('Fade-out animation completed!');
            });
        }
    });
});

---

3️⃣ Creating a Fade Animation

Now, let’s define CSS3 animations for fade effects.

CSS Code

/* Fade-in effect */
.fade-animation.ng-enter {
    opacity: 0;
    transition: opacity 0.5s ease-in;
}

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

/* Fade-out effect */
.fade-animation.ng-leave {
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

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

---

4️⃣ Using Animation Callbacks in HTML

Now, create a button to toggle the message.

HTML Code

<div ng-app="myApp" ng-controller="MainCtrl">
    <button ng-click="toggleMessage()">Toggle Message</button>

    <div class="fade-animation" ng-if="showMessage">
        <p>Hello! This is a fade-in animation with a callback.</p>
    </div>
</div>

How It Works?
✔ $animate.enter(targetElement) runs when the element appears.
✔ $animate.leave(targetElement) runs when the element disappears.
✔ The .then(function() {...}) callback executes after animation completes.

---

5️⃣ Detecting Animation Events

We can also listen for animation start, end, or cancel events.

Using $animate.on()

$animate.on('enter', targetElement, function (element, phase) {
    if (phase === 'start') {
        console.log('Animation started!');
    } else if (phase === 'close') {
        console.log('Animation ended!');
    }
});

Phases:
✔ start – Animation is starting
✔ close – Animation is completed

---

6️⃣ Handling Multiple Animations

You can handle multiple animations using $q.all(), ensuring all animations complete before executing a callback.

Example: Running Multiple Animations

var fadeIn = $animate.enter(angular.element(document.querySelector('.fade-animation')));
var slideIn = $animate.enter(angular.element(document.querySelector('.slide-animation')));

$q.all([fadeIn, slideIn]).then(function () {
    console.log('Both animations completed!');
});