Animating elements based on user interactions

What You’ll Learn

How to use ngAnimate for smooth animations
Applying animations based on click, hover, scroll, and input events
Using CSS and JavaScript-based animations
Best practices for performance optimization

---

1️⃣ Setting Up ngAnimate in AngularJS

AngularJS animations require the ngAnimate module.

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 AngularJS App

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

---

2️⃣ Click-Based Animations

One of the most common user interactions is clicking a button to show/hide elements smoothly.

Example: Fade & Scale on Click

<style>
.box {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    text-align: center;
    line-height: 100px;
    font-size: 18px;
    border-radius: 10px;
    margin-top: 10px;
}

.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="toggleBox()">Toggle Box</button>
    <div class="box" ng-if="isVisible">Hello, AngularJS!</div>
</div>

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

How it Works?
✔ Clicking the button toggles visibility of the box.
✔ ng-enter and ng-leave animate opacity and scale for smooth transitions.

---

3️⃣ Hover-Based Animations

To animate elements when the user hovers over them, we use ng-mouseenter and ng-mouseleave.

Example: Expanding Box on Hover

<style>
.hover-box {
    width: 200px;
    height: 100px;
    background-color: lightcoral;
    text-align: center;
    line-height: 100px;
    font-size: 18px;
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
}

.hover-box.hovered {
    transform: scale(1.2);
    background-color: tomato;
}
</style>

<div ng-app="myApp" ng-controller="myCtrl">
    <div class="hover-box" 
         ng-mouseenter="isHovered = true" 
         ng-mouseleave="isHovered = false" 
         ng-class="{'hovered': isHovered}">
        Hover Me!
    </div>
</div>

app.controller('myCtrl', function ($scope) {
    $scope.isHovered = false;
});

What Happens?
✔ The box expands and changes color when hovered.
✔ The transition is handled using CSS classes dynamically toggled by ng-class.

---

4️⃣ Scroll-Based Animations

We can trigger animations when an element enters the viewport using ng-scroll.

Example: Fade-In on Scroll

<style>
.scroll-box {
    width: 200px;
    height: 100px;
    background-color: lightgreen;
    text-align: center;
    line-height: 100px;
    font-size: 18px;
    border-radius: 10px;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.scroll-box.visible {
    opacity: 1;
}
</style>

<div ng-app="myApp" ng-controller="myCtrl">
    <div style="height: 500px;"></div> <!-- Just for scrolling effect -->
    <div class="scroll-box" id="scrollElement">Scroll Down</div>
</div>

app.controller('myCtrl', function ($scope, $window) {
    angular.element($window).on('scroll', function () {
        var element = document.getElementById('scrollElement');
        if (element.getBoundingClientRect().top < window.innerHeight) {
            element.classList.add('visible');
        }
    });
});

How it Works?
✔ The scroll-box starts with opacity 0.
✔ When the user scrolls down, JavaScript checks if the element is in the viewport and adds the visible class.

---

5️⃣ Animating Based on User Input

We can apply animations when a user types into an input field.

Example: Highlight Input on Focus

<style>
.input-box {
    width: 250px;
    height: 40px;
    border: 2px solid gray;
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    padding-left: 10px;
}

.input-box.focused {
    border-color: dodgerblue;
    box-shadow: 0 0 8px dodgerblue;
}
</style>

<div ng-app="myApp" ng-controller="myCtrl">
    <input type="text" class="input-box" 
           ng-focus="isFocused = true" 
           ng-blur="isFocused = false" 
           ng-class="{'focused': isFocused}" 
           placeholder="Type something...">
</div>

app.controller('myCtrl', function ($scope) {
    $scope.isFocused = false;
});

How it Works?
✔ When the input gains focus, it gets a blue glow effect.
✔ When it loses focus, the effect disappears.

---

6️⃣ Best Practices for Performance Optimization

✔ Use ng-if instead of ng-show for elements that don’t need to be in the DOM all the time.
✔ Minimize heavy animations (avoid animating width/height directly, use transform instead).
✔ Use hardware-accelerated properties like opacity and transform for smooth performance.
✔ Avoid too many $watch calls—bind animations to events (ng-mouseenter, ng-focus) instead.

---

7️⃣ Summary Table

User Interaction	Directive Used	Example
Click	ng-click	Toggle visibility
Hover	ng-mouseenter, ng-mouseleave	Expand box on hover
Scroll	$window.scroll	Fade-in when in viewport
Input Focus	ng-focus, ng-blur	Highlight input field

---

By applying these animations, you can make your AngularJS applications more dynamic, interactive, and user-friendly!