AngularJS एनिमेशन

CSS की मदद से, AngularJS एनिमेशन ट्रांसीशन प्रदान करता है。

एनिमेशन क्या है?

एनिमेशन, यह एचटीएमएल एलिमेंट के परिवर्तन को आपको एक गतिशील भ्रम देता है。

इंस्टांस

चेकबॉक्स को चुनकर DIV को छुपाएं:

<body ng-app="ngAnimate">
DIV को छुपाएं: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>

स्वयं प्रयास करें

अनुप्रयोग में एनिमेशन को अधिकतर नहीं होना चाहिए, लेकिन कुछ एनिमेशन अनुप्रयोग को समझने में आसान बना सकते हैं。

मुझे क्या कीजाना है?

आपका अनुप्रयोग एनिमेशन के लिए तैयार होने वाला है, तो आपको AngularJS Animate लाइब्रेरी को शामिल करना होगा:

<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular-animate.js"></script>

तब, आपको अपने एप्लिकेशन में इसे उल्लेख करना होगा। ngAnimate मॉड्यूल:

<body ng-app="ngAnimate">

या, अगर आपका एप्लिकेशन का नाम है, तो ngAnimate अपने एप्लिकेशन मॉड्यूल में निर्भरता जोड़ें:

इंस्टांस

<body ng-app="myApp">
<h1>छुपाए डीवी：</h1><input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>

स्वयं प्रयास करें

ngAnimate का क्या काम करता है?

ngAnimate मॉड्यूल क्लास जोड़ या नष्ट करता है।

ngAnimate मॉड्यूल आपके HTML एलीमेंट को एनीमेशन नहीं करता है, लेकिन जब ngAnimate कुछ घटनाओं (जैसे HTML एलीमेंट के छुपाने या दिखाने) पर ध्यान देते हुए, इस एलीमेंट को कुछ पूर्व-विन्यस्त क्लास मिलेगी, जिनका इस्तेमाल एनीमेशन के लिए किया जा सकता है।

AngularJS में क्लास जोड़ने या नष्ट करने के लिए इन्डेक्टिव शामिल हैं:

  • ng-show
  • ng-hide
  • ng-class
  • ng-view
  • ng-include
  • ng-repeat
  • ng-if
  • ng-switch

ng-show और ng-hide इन्डेक्टिव जोड़ या नष्ट करेगी, ng-hide क्लास मूल्य.

अन्य इन्डेक्टिव डॉम में आने के समय जोड़ देगी, ng-enter क्लास मूल्य जोड़ देगी और डॉम से निकालते समय इसे नष्ट कर देगी, ng-leave गुण।

जब HTML एलीमेंट की स्थिति बदली जाए,ng-repeat इन्डेक्टिव एक और जोड़ देगा: ng-move क्लास मूल्य.

इसके अलावा एनीमेशन के दौरान, HTML एलीमेंट की कुछ क्लास मूल्य रहेगी और एनीमेशन पूरा होने के बाद इन क्लास मूल्य नष्ट कर दिया जाएगा। उदाहरण के लिए:ng-hide इन्डेक्टिव को इन क्लास मूल्य जोड़ देगा:

  • ng-animate
  • ng-hide-animate
  • ng-hide-add（यदि एलीमेंट छुपाना है तो）
  • ng-hide-remove（यदि एलीमेंट दिखाना है तो）
  • ng-hide-add-active（यदि एलीमेंट छुपाना है तो）
  • ng-hide-remove-active（यदि एलीमेंट दिखाना है तो）

CSS से एनीमेशन करना

हम CSS पारितालन या CSS एनीमेशन का इस्तेमाल कर सकते हैं कि HTML एलीमेंट को एनीमेशन दें। यह शिक्षण आपको दोनों को दिखाएगा।

CSS एनीमेशन के बारे में अधिक जानकारी के लिए हमारे CSS पारितालन शिक्षण को पढ़ें और CSS एनीमेशन शिक्षण को पढ़ें।

CSS पारितालन

CSS पारितालन आपको दिये गये समय बीच में एक CSS गुण की मूल्य से दूसरी मूल्य को आसानी से पारित करने की अनुमति देता है:

इंस्टांस

जब DIV एलीमेंट को प्राप्त किया जाता है .ng-hide क्लास के दौरान, पारितालन 0.5 सेकंड चलेगा, ऊंचाई 100px से सामने आने वाले ढाले गया होगा:

@keyframes myChange {
div {
  transition: all linear 0.5s;
  background-color: lightblue;
  height: 100px;
}
div.ng-hide {
  height: 0;
}
</style>

स्वयं प्रयास करें

CSS एनिमेशन

CSS एनिमेशन आपको दिए गए समय के दौरान एक CSS एट्रिब्यूट की गुणवत्ता को एक अन्य गुणवत्ता में सहीबढ़ता देता है:

इंस्टांस

जब DIV एलीमेंट को प्राप्त किया जाता है .ng-hide <style>

@keyframes myChange {
from {
  to {
    height: 100px;
  }
    height: 0;
  }
}
div {
  height: 100px;
  background-color: lightblue;
}
div.ng-hide {
  animation: 0.5s myChange;
}
</style>

स्वयं प्रयास करें