Angularjs - Animations in Hindi

First Page
Next Page

AngularJS में, हम सीएसएस की मदद से एनिमेटेड संक्रमण को बनाते हैं सीएसएस उन HTML तत्वों को बदल देते है जो आपके प्रस्ताव को misconception कर देते हैं।

AngularJS सामान्य directive जैसे ngRepeat, ngSwitch, और ngView के साथ-साथ $ चेतन सेवा के माध्यम से कस्टम directive के लिए एनीमेशन हुक को प्रदान करता है इन एनीमेशन हुक को अलग-अलग directive के जीवन चक्र के दौरान एनिमेशन को ट्रिगर करने के लिए सेट किया जाता है

AngularJS एनीमेशन सुविधा यूजर को DOM के भीतर सामग्री changes को एनिमेट करने के लिए विशिष्ट सीएसएस style वर्ग को संलग्न करने में सक्षम बनाता है, जो अनुप्रयोग के भीतर directive का उपयोग कर रहा है AngularJS में एनीमेशन विशिष्ट घटनाओं को animate करने के लिए सीएसएस संक्रमण का उपयोग करती है.

AngularJS में एनिमेशन 1.1.5 बीटा supported थे AngularJS 1.2 में सुविधा के एक स्थिर संस्करण के रिलीज़ होने से पहले इसमें कई बदलाव हुए कोणीय application में एनीमेशन समर्थन को जोड़ा जा सकता है या बहुत आसानी से हटाया भी जा सकता है

Library दोनों सीएसएस पर आधारित है और जावास्क्रिप्ट पर आधारित animation के लिए बहुत अच्छे समर्थन को लाता है हालांकि animation को जावास्क्रिप्ट में लिखा जा सकता है, लेकिन सीएसएस animation का उपयोग करने की सिफारिश की गई है इसका कारण यह है कि सीएसएस animation का उपयोग ब्राउजर द्वारा कम प्राथमिकता के साथ किया जाता है।

Example Code

<html>  
  
<head>  
    <title>Angular JS Example</title>  
    <style>  
        div {  
            transition: width2s, height4s;  
            background-color: red;  
            height: 150px;  
            width: 150%;  
            position: relative;  
            top: 10px;  
            left: 10px;  
        }  
          
        .ng-hide {  
            height: 0;  
            width: 0;  
            background-color: blue;  
            top: -100px;  
            left: 150px;  
        }  
    </style>  
    <scriptsrc="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">  
        </script>  
        <scriptsrc="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js">  
            </script>  
</head>  
  
<bodyng-app="ngAnimate">  
    <h2>AngularJS Animation</h2>  
    <h1>Hide this DIV: <inputtype="checkbox"ng-model="myCheck"></h1>  
    <divng-hide="myCheck">  
        <pre><h2>During the Animation color of Div  
Change from red to blue  
</h2></pre>  
    </div>  
 </body>  
  
</html>
First Page
Next Page