एंगुलरजेएस एनिमेशन
AngularJS CSS की मदद से एनिमेटेड ट्रांज़िशन प्रदान करता है।
एक एनिमेशन क्या है?
एक एनीमेशन तब होता है जब एक HTML तत्व का परिवर्तन आपको गति का भ्रम देता है।
उदाहरण:
DIV को छिपाने के लिए चेकबॉक्स को चेक करें:
<body ng-app="ngAnimate">
Hide the DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>
एप्लिकेशन एनिमेशन से नहीं भरे जाने चाहिए, लेकिन कुछ एनिमेशन एप्लिकेशन को समझने में आसान बना सकते हैं।
मुझे क्या ज़रुरत है?
अपने एप्लिकेशन को एनिमेशन के लिए तैयार करने के लिए, आपको AngularJS एनिमेट लाइब्रेरी को शामिल करना होगा:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>
ngAnimateफिर आपको अपने आवेदन में मॉड्यूल का उल्लेख करना होगा :
<body ng-app="ngAnimate">
या यदि आपके एप्लिकेशन का कोई नाम है, तो ngAnimateअपने एप्लिकेशन मॉड्यूल में निर्भरता के रूप में जोड़ें:
उदाहरण
<body ng-app="myApp">
<h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
<script>
var app =
angular.module('myApp', ['ngAnimate']);
</script>
एनजीएनिमेट क्या करता है?
ngAnimate मॉड्यूल कक्षाओं को जोड़ता और हटाता है।
ngAnimate मॉड्यूल आपके HTML तत्वों को चेतन नहीं करता है, लेकिन जब ngAnimate कुछ घटनाओं को नोटिस करता है, जैसे कि किसी HTML तत्व को छिपाना या दिखाना, तत्व को कुछ पूर्व-निर्धारित कक्षाएं मिलती हैं जिनका उपयोग एनिमेशन बनाने के लिए किया जा सकता है।
कक्षाओं को जोड़ने/निकालने वाले AngularJS में निर्देश हैं:
ng-showng-hideng-classng-viewng-includeng-repeatng-ifng-switch
और निर्देश एक वर्ग मान जोड़ता ng-showया हटाता है।ng-hideng-hide
अन्य निर्देश ng-enterDOM में प्रवेश करते समय एक वर्ग मान और DOM ng-leaveसे निकाले जाने पर एक विशेषता जोड़ते हैं।
जब HTML तत्व स्थिति बदलता है तो ng-repeatनिर्देश एक वर्ग मान भी जोड़ता है ।ng-move
इसके अलावा, एनीमेशन के दौरान , HTML तत्व में वर्ग मानों का एक सेट होगा, जिसे एनीमेशन समाप्त होने पर हटा दिया जाएगा। उदाहरण:
ng-hideनिर्देश इन वर्ग मूल्यों को जोड़ देगा:
ng-animateng-hide-animateng-hide-add(यदि तत्व छुपाया जाएगा)ng-hide-remove(यदि तत्व दिखाया जाएगा)ng-hide-add-active(यदि तत्व छुपाया जाएगा)ng-hide-remove-active(यदि तत्व दिखाया जाएगा)
CSS का उपयोग करने वाले एनिमेशन
हम HTML तत्वों को चेतन करने के लिए CSS ट्रांज़िशन या CSS एनिमेशन का उपयोग कर सकते हैं। यह ट्यूटोरियल आप दोनों को दिखाएगा।
CSS एनिमेशन के बारे में अधिक जानने के लिए, हमारे CSS ट्रांजिशन ट्यूटोरियल और हमारे CSS एनिमेशन ट्यूटोरियल का अध्ययन करें ।
सीएसएस संक्रमण
CSS ट्रांज़िशन आपको एक निश्चित अवधि में, एक मान से दूसरे मान में, CSS संपत्ति के मूल्यों को सुचारू रूप से बदलने की अनुमति देता है:
उदाहरण:
जब DIV तत्व को .ng-hideकक्षा मिलती है, तो संक्रमण में 0.5 सेकंड लगेंगे, और ऊंचाई आसानी से 100px से 0 में बदल जाएगी:
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
}
.ng-hide
{
height: 0;
}
</style>
सीएसएस एनिमेशन
CSS एनिमेशन आपको एक निश्चित अवधि में CSS संपत्ति के मूल्यों को एक मूल्य से दूसरे मान में आसानी से बदलने की अनुमति देता है:
उदाहरण:
जब DIV तत्व को .ng-hideकक्षा मिलती है, तो myChange
एनीमेशन चलेगा, जो आसानी से ऊंचाई को 100px से 0 में बदल देगा:
<style>
@keyframes myChange {
from {
height: 100px;
} to {
height: 0;
}
}
div {
height: 100px;
background-color: lightblue;
}
div.ng-hide {
animation: 0.5s myChange;
}
</style>