AngularJS मे हम CSS की मदद से Animated Transition को बनाते है. CSS उन HTML Elements को बदल देते है जो आपके प्रस्ताव को Misconception कर देते है.
AngularJS सामान्य Directive जैसे ngRepeat, ngSwitch, और ngView के साथ-साथ $ Animate Service के माध्यम से Custom Directive के लिए Animation Hook को प्रदान करता है. इन Animation Hook को अलग-अलग Directive के Life Cycle के दौरान Animation को Trigger करने के लिए Set किया जाता है.
AngularJS Animation सुविधा User को DOM के भीतर सामग्री Changes को Animate करने के लिए विशिष्ट CSS Style Class को Attachment करने मे सक्षम बनाता है जो Application के भीतर Directive का उपयोग कर रहा है. AngularJS मे Animation विशिष्ट घटनाओं को Animate करने के लिए CSS Transition का उपयोग करते है.
AngularJS मे Animation 1.1.5 बीटा Supported थे AngularJS 1.2 में सुविधा के एक स्थिर संस्करण के Release होने से पहले इसमे कई बदलाव हुए है. AngularJS Application मे Animation समर्थन को जोड़ा जा सकता है या बहुत आसानी से हटाया भी जा सकता है.
Library दोनो CSS पर आधारित है और Javascript पर आधारित Animation के लिए बहुत अच्छे समर्थन को लाता है. हालांकि Animation को Javascript में लिखा जा सकता है. लेकिन CSS Animation का उपयोग करने की सिफारिश की गई है. इसका कारण यह है कि CSS Animation का उपयोग ब्राउजर द्वारा कम प्राथमिकता के साथ किया जाता है.
<!DOCTYPE html>
<html>
<style>
div {
transition: all linear 0.5s;
background: #3b58e4 !important;
height: 100px;
width: 100%;
position: relative;
top: 0;
left: 0;
}
.ng-hide {
height: 0;
width: 0;
background-color: transparent;
top:-200px;
left: 200px;
}
</style>
<script src =
"http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<script src =
"http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js">
</script>
<body ng-app="ngAnimate">
<h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
</body>
</html>