Course Progress 59%

AngularJS Animations

← AngularJS Includes AngularJS Routing →

AngularJS Animations का उपयोग UI को interactive, smooth और user-friendly बनाने के लिए किया जाता है। Animations से elements के show, hide, add, remove और state change को visually attractive बनाया जा सकता है। AngularJS animations CSS और JavaScript दोनों के साथ work करती हैं, लेकिन सबसे common और simple तरीका CSS animations का होता है।

AngularJS में animations ngAnimate module के जरिए implement की जाती हैं।

ngAnimate Module क्या है

ngAnimate AngularJS का official animation module है जो AngularJS directives के साथ animations enable करता है।

यह module इन actions पर animation apply करता है:

  • Element show / hide
  • DOM में element add / remove
  • Class add / remove
  • Repeat items enter / leave

ngAnimate Module Include करना

AngularJS animations use करने के लिए पहले angular-animate.js include करना ज़रूरी है।

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

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

Code Explanation

  • angular-animate.min.js animation support देता है
  • Module dependencies में "ngAnimate" add किया गया है
  • इसके बिना AngularJS animations काम नहीं करेंगी

ng-show और ng-hide Animation

सबसे common animation ng-show और ng-hide के साथ use होती है।

<div ng-app="myApp" ng-controller="aniCtrl">
  <button ng-click="show = !show">Toggle</button>
  <p ng-show="show" class="fade">Hello AngularJS</p>
</div>

app.controller("aniCtrl", function($scope) {
  $scope.show = true;
});

.fade.ng-hide {
  opacity: 0;
}

.fade {
  transition: opacity 0.5s ease;
}

Code Explanation

  • ng-show element की visibility control करता है
  • ng-hide class AngularJS automatically add करता है
  • CSS transition smooth fade effect देता है

ng-if Animation

ng-if DOM से element को पूरी तरह add और remove करता है।

<button ng-click="visible = !visible">Toggle</button>
<p ng-if="visible" class="slide">Sliding Text</p>

.slide.ng-enter {
  opacity: 0;
  transform: translateY(-20px);
}

.slide.ng-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.4s ease;
}

.slide.ng-leave {
  opacity: 1;
}

.slide.ng-leave-active {
  opacity: 0;
  transition: opacity 0.3s ease;
}

Code Explanation

  • .ng-enter element add होते समय apply होती है
  • .ng-leave element remove होते समय apply होती है
  • ng-if real DOM animation के लिए useful है

ng-repeat Animation

List items add और remove होने पर animation apply की जा सकती है।

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

<button ng-click="add()">Add</button>
<button ng-click="remove()">Remove</button>

$scope.items = ["A", "B", "C"];

$scope.add = function() {
  $scope.items.push("New");
};

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

.list.ng-enter {
  opacity: 0;
}

.list.ng-enter-active {
  opacity: 1;
  transition: opacity 0.4s;
}

.list.ng-leave {
  opacity: 1;
}

.list.ng-leave-active {
  opacity: 0;
  transition: opacity 0.4s;
}

Code Explanation

  • ng-repeat items enter और leave detect करता है
  • CSS classes automatically apply होती हैं
  • List animation smooth दिखाई देती है

ng-class Animation

Class add या remove होने पर animation trigger होती है।

<button ng-click="active = !active">Toggle</button>
<p ng-class="{highlight: active}" class="box">
  Animated Box
</p>

.box {
  transition: background-color 0.5s;
}

.highlight {
  background-color: yellow;
}

Code Explanation

  • ng-class class dynamically add/remove करता है
  • CSS transition animation provide करता है
  • State change animation के लिए useful है

ngAnimate CSS Classes Summary

AngularJS automatically ये classes apply करता है:

  • ng-enter
  • ng-enter-active
  • ng-leave
  • ng-leave-active
  • ng-hide-add
  • ng-hide-remove

Explanation

  • ये classes animation lifecycle control करती हैं
  • Developer सिर्फ CSS लिखता है
  • AngularJS timing manage करता है

JavaScript Animations (Advanced)

AngularJS JavaScript-based animations भी support करता है।

app.animation(".fade", function() {
  return {
    enter: function(element, done) {
      element.css("opacity", 0);
      element.animate({ opacity: 1 }, done);
    }
  };
});

Code Explanation

  • .animation() API custom animation define करता है
  • enter, leave hooks available होते हैं
  • Advanced control के लिए use किया जाता है

Performance Tips

  • Simple animations के लिए CSS prefer करें
  • Heavy animations avoid करें
  • Mobile users को ध्यान में रखें
  • Unnecessary watchers न बनाएं

AngularJS Animations Best Practices

  • Always ngAnimate module include करें
  • Small और subtle animations use करें
  • UX improve करने के लिए animation रखें, distraction के लिए नहीं
  • CSS animations को priority दें

Common Animation Mistakes

  • ngAnimate include करना भूल जाना
  • Too many animations apply करना
  • ng-if और ng-show का difference न समझना
  • Animation logic controller में लिखना

Summary

इस chapter में आपने सीखा:

  • AngularJS animations क्या हैं
  • ngAnimate module का उपयोग
  • ng-show, ng-if, ng-repeat animations
  • CSS और JavaScript animations
  • Animation lifecycle classes
  • Best practices और common mistakes
← AngularJS Includes AngularJS Routing →
  • Home