AngularJS एक सुपरहीरो जावास्क्रिप्ट फ्रेमवर्क है जो सिंगल पेज एप्लिकेशन (एसपीए) को बहुत आसान बनाता है। इसके शीर्ष पर AngularJS एक मुट्ठी भर कोणीय मॉड्यूल के साथ आता है जिसका उपयोग एक भयानक उपयोगकर्ता अनुभव बनाने के लिए किया जा सकता है। इस पोस्ट में हम यह देखने जा रहे हैं कि कोणीय विचारों के लिए पेज ट्रांज़िशन / एनिमेशन को जोड़ने के लिए लोकप्रिय ngAnimate का उपयोग कैसे करें।
ngAnimate का उपयोग विभिन्न निर्देशों जैसे ngRepeat, ngView, ngInclude, ngIf, ngMessage आदि के साथ किया जा सकता है।
इस पोस्ट में हम ngView के साथ एनिमेशन का उपयोग करेंगे
यहां हम एडोब से ब्रैकेट आईडीई का उपयोग कर रहे हैं, लेकिन आप दूसरों का उपयोग करने के लिए स्वतंत्र हैं, उदाहरण के लिए, सबलाइम टेक्स्ट, जेटस्ट्रिंस से वेबस्टॉर्म आदि।
ध्यान दें : हम अपने HTML पृष्ठों को सुंदर रूप देने के लिए बूटस्वाच बूटस्ट्रैप एपीआई का भी उपयोग करेंगे
परियोजना संरचना:
नीचे ब्रैकेट आईडीई में परियोजना संरचना है
यहाँ परियोजना में प्रयुक्त प्रत्येक फ़ाइल का संक्षिप्त विवरण दिया गया है
एनीमेशन - मुख्य सीएसएस फ़ाइल जहां हम अपने पेज एनिमेशन को परिभाषित करते हैं
bootstrap.min.css - बूटवैप बूटस्ट्रैप हमारे देने के लिए एक सुंदर रूप टैग
config.js - मुख्य जावास्क्रिप्ट फ़ाइल जहां हम अपने कोणीय मॉड्यूल को मार्गों और नियंत्रकों के साथ परिभाषित करते हैं
shellPage.html - यह शेल पेज है जिसमें अन्य दृश्य गतिशील रूप से लोड किए जाएंगे
view1.html, view2.html, view3.html - ये आंशिक विचार हैं जो शेलपेज में लोड किए जाएंगे
एनिमेशन कैसे लगाए जाते हैं:
ngAnimate सीएसएस कक्षाओं को अलग-अलग कोणीय निर्देशों पर लागू करता है जो इस बात पर निर्भर करता है कि वे प्रवेश कर रहे हैं या दृश्य छोड़ रहे हैं
.ng-enter - जब भी यह पृष्ठ में लोड होता है, तो यह सीएसएस वर्ग निर्देश पर लागू होता है
क्या सभी नागों की निगरानी कर सकते हैं
.ng-छुट्टी - यह सीएसएस वर्ग जब भी पृष्ठ छोड़ता है निर्देश पर लागू होता है
आइए एक-एक करके हर फाइल पर जाएं
shellPage.html
शेलपेज आवश्यक संसाधनों को लोड करता है, शरीर में एनजी-ऐप को लागू करता है और गतिशील रूप से विचारों को इंजेक्ट करने के लिए एनजी-व्यू जोड़ता है।
config.js
कॉन्फ़िगरेशन फ़ाइल में, हम अपने कोणीय मॉड्यूल को मार्गों और नियंत्रकों के साथ परिभाषित करते हैं।
मॉड्यूल ट्रांस्फरऐप में दो निर्भरताएँ होती हैं: ngAnimate और ngRoute
var transitionApp = angular.module ('ट्रांज़ेक्शनApp', ['ngAnimate', 'ngRoute']) ट्रांज़िशनApp.config (फ़ंक्शन ($ मार्गप्रोवाइडर) {$ मार्गप्रोवाइडर .when (’/’, {templateUrl: ’partials / view1.html’) , कंट्रोलर: 'view1Controller'}) .when ('/ view2', {templateUrl: 'partials / view2.html', कंट्रोलर: 'view2Controller'}) .when ('/ view3'), {templateUrl: 'partials / view3। html ', कंट्रोलर:' view3Controller '}))) ट्रांज़िशनऐप.कंट्रोलर (' view1 कॉन्ट्रोलर ', फंक्शन ($ स्कोप) {$ गुंजाइश.cssClass =' view1 '}) ट्रांज़ैक्शनऐप.कंट्रोलर (' view2Controller ', फंक्शन ($ स्कोप) { $ गुंजाइश.cssClass = 'view2'}) ट्रांज़िशनऐप.कंट्रोलर ('view3 कॉन्ट्रोलर', फंक्शन ($ गुंजाइश) {$ गुंजाइश.cssClass = 'view3'})हमने तीन आंशिक दृश्य (view1, view2, view3) परिभाषित किए हैं जो URL के आधार पर शेलपेज में इंजेक्ट किए जाएंगे। रिस्पांसिव कंट्रोलर्स एक cssClass विशेषता सेट करते हैं, जो CSS क्लास का नाम है, जिसे एनजी-व्यू पर लागू किया जाएगा। हम इन सीएसएस कक्षाओं में अपने एनिमेशन को परिभाषित करेंगे जो प्रत्येक पृष्ठ को विभिन्न एनिमेशन के साथ लोड करेंगे।
आंशिक पृष्ठ view1.html, view2.html, view3.html
आंशिक पृष्ठों में बहुत कुछ नहीं है, बस कुछ पाठ और अन्य विचारों के लिंक हैं
view1.html
यह दृश्य 1 है
देखें 2 देखें ३
view2.html
यह दृश्य 2 है
देखें 1 देखें ३
view3.html
यह दृश्य 3 है
देखें 1 देखें 2
याद रखें कि ये तीन एचटीएमएल फाइलें आंशिक पृष्ठ हैं, जो शेल में दर्ज की जाएंगी। html जो कि हमने config.jpg फ़ाइल में परिभाषित किया है, के अनुसार।
शैलियों और एनिमेशन को परिभाषित करना:
सीएसएस को इसे लागू करके हमारे विचारों में कुछ जीवन डाल दें
.view {नीचे: 0 गद्दी-शीर्ष: 200px स्थिति: पूर्ण पाठ-संरेखित: केंद्र शीर्ष: 0 चौड़ाई: 100%} .view एक {मार्जिन-शीर्ष: 50px} .view h1 {फ़ॉन्ट-आकार: 60px} #heading { रंग: # 333 स्थिति: पूर्ण पाठ-संरेखण: केंद्र शीर्ष: 50px चौड़ाई: 100%} / * पृष्ठभूमि और आंशिक रंग पृष्ठों के लिए पाठ रंग (दृश्य 1, दृश्य 2, दृश्य 3) ------------- ------------------------------------------------ * / .view1 {पृष्ठभूमि: # bef2de रंग: # 00907c} .view2 {पृष्ठभूमि: # D4D0EA रंग: # 55316f} .view3 {पृष्ठभूमि: # FFCBA4 रंग: rgba (149, 95, 40, 0.91)}।विभिन्न विचारों के बीच एक स्वच्छ संक्रमण बनाने के लिए, हम CSS z-index गुण सेट करेंगे
.view.ng-leave {z-index: 9999} .view.ng-enter {z-index: 8888}अब हमारे एनिमेशन को परिभाषित करने का समय आ गया है
स्लाइड लेफ्ट एनिमेशन
/ * स्लाइड आउट लेफ्ट * / @keyframes SlideOutLeft {से {ट्रांसफ़ॉर्म: ट्रांस्फ़्लेक्स (-100%)}} @ -मोज़-कीफ़ोर्स स्लाइडऑउटफ़्लैट {को -मोज़-ट्रांसफ़ॉर्म: ट्रांसलेक्स (-100%)}}} @ -webkit-keyframes SlideOutLeft {से -webkit- ट्रांसफ़ॉर्म: ट्रांसलेशनएक्स (-100%)}}स्केल अप एनिमेशन
/ * स्केल अप * / @keyframes स्केलअप {से {अपारदर्शिता: 0.3 ट्रांसफॉर्मेशन: स्केल (0.8)}} @ -मोज-कीफ्रेम स्केलअप {{ओपेसिटी: 0.3 -मोज-ट्रांसफॉर्म: स्केल (0.8)}}} @ -webkit- से कीफ्रेम स्केलअप {से {अपारदर्शिता: 0.3 -बेटक-ट्रांसफॉर्म: स्केल (0.8)}}राइट एनिमेशन से स्लाइड करें
अजगर के लिए परमाणु का उपयोग कैसे करें
/ * दाईं ओर से स्लाइड करें * / @keyframes SlideInRight {{ट्रांसफॉर्मेशन: ट्रांसप्लक्स (100%)} से {ट्रांसफॉर्मेशन: ट्रांसप्लक्स (0)}} @ -मोज-कीफ्रेम स्लाइडइंटराइट {से {-मोज-ट्रांसफॉर्म: ट्रांसलेशनएक्स (100) %)} से {-मोज़-ट्रांसफ़ॉर्म: TranslateX (0)}} @ -webkit- कीफ़्रेम स्लाइडइंटरटाइट {{-बॉटकिट-ट्रांसफ़ॉर्म: ट्रांसलेशनएक्स (100%)} से {-वेबकैट-ट्रांस्फ़ॉर्म} ट्रांसएक्सएक्स (0)}}नीचे से एनीमेशन में स्लाइड
/ * नीचे से * स्लाइड करें * / @keyframes स्लाइडइन् यूपी {से {ट्रांसफॉर्म: ट्रांसपी (100%)} से {ट्रांसफॉर्म: ट्रांसलाइ (0)}} @ -मोज-कीफॉर्म्स स्लाइडइएनयूपी {से {-मोज-ट्रांसफॉर्म: ट्रांसलाइ (100) %)} से {-मोज़-ट्रांसफ़ॉर्म: ट्रांसलाइ (0)}} @ -webkit- कीफ्रेम स्लाइडइएनयू {{{-बॉटकिट-ट्रांसफ़ॉर्म: ट्रांसलाइ (100%)} से {-वेबकैट-ट्रांसफ़ॉर्म: ट्रांसफ़ी (0)}}घुमाएँ और गिर एनीमेशन
/ * घुमाएँ और गिरें * / @ -webkit- कीफ़्रेम घुमाएँ {0% {-वेबकिट-ट्रांसफ़ॉर्म: रोटेज़ (0deg)} 20% {-वेबकैट-ट्रांसफ़ॉर्म: रोटेज़ (10deg) -webkit- एनीमेशन-टाइमिंग-फंक्शन: सहजता- आउट} 40% {-वेबकैट-ट्रांसफॉर्म: रोटेडजेड (17 डीजीजी)} 60% {-वेबकैट-ट्रांसफॉर्मेशन: रोटेडजेड (16 डीजीजी)} 100% {-वेबकैट-ट्रांसफॉर्म: ट्रांसलाइ (100%) रोटेज (17 डीजीजी)}} @ -moz -keyframes रोटेटफॉल {0% {-मोज़-ट्रांसफ़ॉर्म: रोटेडज़ेड (0 डीजी)} 20% {-मोज़-ट्रांसफ़ॉर्म: रोटेज़ (10 डीजी) -मोज़-एनीमेशन-टाइमिंग-फंक्शन: ईज़ी-आउट} 40% {मोज़-ट्रांसफ़ॉर्म: रोटेटज़ (17 डीजीजी)} 60% {-मोज़-ट्रांसफ़ॉर्म: रोटेडज़ेड (16 डीजीजी)} 100% {-मोज़-ट्रांसफ़ॉर्म: ट्रांसलाइ (100%) रोटेज़ (17 डीजीजी)}} @keyframes रोटफ्रॉल (0% {ट्रांसफ़ॉर्म: रोटेज़ (0deg)) } 20% {ट्रांस्फ़ॉर्म: रोटेटज़ (10 डीजी) एनिमेशन-टाइमिंग-फंक्शन: ईज़ी-आउट} 40% {ट्रांसफॉर्मेशन: रोटेडज़ेड (17 डीजीजी)} 60% {ट्रांसफॉर्मेशन: रोटेज़ (16 डीजीजी)} 100% {ट्रांसफॉर्मेशन: ट्रांसली (100%) रोटेटज (17deg)}}समाचार पत्र एनीमेशन घुमाएँ
/ * रोटेट करें अखबार * / @ -webkit-keyframes रोटेट करेंऑनवॉपर पेपर {से -webkit-transform: TranslateZ (-3000px) रोटेटज (360deg) अपारदर्शिता: 0}} @ -moz-keyframes रोटेट करेंऑउटनैप्सपर {को -moz- ट्रांसफॉर्म: (-3000px) रोटेटजेड (360 डिग्री) अपारदर्शिता: 0}} @keyframes रोटेटऑउटन्यूस्पैसर {से {ट्रांसफॉर्म: ट्रांसलेट (-3000 पीएक्स) रोटेज (360 डिग्री) अपारदर्शिता: 0}}एनिमेशन लागू करना:
पहले जिन एनिमेशनों को हमने परिभाषित किया था, उन्हें लागू करने का समय आ गया है
1 एनिमेशन देखें
/ * पृष्ठ छोड़ने के लिए 1 एनिमेशन देखें और * / .view1.ng-leave {-webkit- एनीमेशन: स्लाइडऑउटलेट 0.5s दोनों को आसानी से -moz- एनीमेशन: स्लाइडऑउटलेट 0.5 एस दोनों को आसानी से एनीमेशन में स्लाइड करें: स्लाइडऑउटलेट 0.5 एस दोनों आसानी से -in} .view1.ng-enter -webkit- एनीमेशन: स्केलअप 0.5s दोनों आसानी-में -मोज़-एनीमेशन: स्केलअप 0.5s दोनों आसानी-इन एनीमेशन: स्केलअप 0.5s दोनों आसानी-में}2 एनिमेशन देखें
/ * पृष्ठ छोड़ने के लिए 2 एनिमेशन देखें और प्रवेश करें * / .view2.ng-leave {-webkit-transform-origin: 0% 0% -webkit- एनीमेशन: बारी बारी 1s दोनों आसानी से -मोज़-ट्रांसफॉर्म-मूल: 0% 0% -मोज़-एनीमेशन: रोटाफ़ॉल 1 एस, दोनों आसानी-से ट्रांसफॉर्म-मूल में: 0% 0% एनीमेशन: रोटफ़ॉल 1 एस दोनों आसानी-इन} .view2.ng-enter -webkit-एनीमेशन: स्लाइडऑनलाइन 0.5% दोनों आसानी-में -। moz- एनीमेशन: SlideInRight 0.5s दोनों आसानी-से एनीमेशन: SlideInRight 0.5s दोनों आसानी-से}3 एनिमेशन देखें
/ * पृष्ठ छोड़ने के लिए 3 एनिमेशन देखें और * / .view3.ng-leave {-webkit-transform-origin: 50% 50% -webkit- एनीमेशन: रोटेटन्यूस्पैपर .5s दोनों आसानी-इन -मोज़-ट्रांसफॉर्म-मूल: 50 में प्रवेश करें। % 50% -मोज़-एनीमेशन: रोटेटऑनव्यूपर। 5 एस दोनों आसानी-से ट्रांसफॉर्म-ओरिजिनल: 50% 50% एनीमेशन: रोटेटऑनवैपर्स ।5 एस दोनों आसानी-में} .view3.ng-enter-{-bbkit- एनिमेशन: स्लाइड.इन 0.5s दोनों आसानी। -in -moz- एनीमेशन: SlideInUp 0.5s दोनों आसानी-में एनीमेशन: SlideInUp 0.5s दोनों आसानी-में}हम सभी परिवर्तनों के साथ किए जाते हैं। अब आवेदन चलाने का समय आ गया है
अनुप्रयोग चलाना
आवेदन चलाने पर, आपको नीचे पृष्ठ के साथ प्रस्तुत किया जाएगा:
लिंक पर क्लिक करें और आप आंशिक पृष्ठों में प्रवेश करने और छोड़ने पर एनिमेशन को खेल में देखेंगे।
कई अन्य एनिमेशन हैं जिनका उपयोग किया जा सकता है। इसके अलावा, संभावित प्रभावों का एक भारी सेट यहाँ हो सकता है: http://tympanus.net/Development/PageTransitions/
कोड डाउनलोड करें और इसे स्वयं आज़माएं
[buttonleads form_title = 'डाउनलोड कोड' redirect_url = https: //edureka.wistia.com/medias/erx9uep9sa/download? media_file_id = 80450196_id = 283 button_text = 'डाउनलोड कोड']?
मुझे उम्मीद है कि आपको अमानवीय ब्लॉग वाला उपरोक्त एनीमेशन पसंद आया होगा। यदि आप कोणीय जेएस में गहरी डुबकी लगाना चाहते हैं, तो मैं आपको सलाह दूंगा कि हमारी नज़र क्यों नहीं है पाठ्यक्रम पृष्ठ। एडुर्का में कोणीय जेएस प्रमाणन प्रशिक्षण आपको वास्तविक जीवन के उपयोग के मामलों का उपयोग करते हुए लाइव प्रशिक्षक के नेतृत्व वाले सत्रों और हाथों पर प्रशिक्षण के माध्यम से कोणीय जेएस में एक विशेषज्ञ बना देगा।
क्या आप हमसे कोई प्रश्न पूछना चाहते हैं? कृपया टिप्पणी अनुभाग में इसका उल्लेख करें और हम आपके पास वापस आ जाएंगे।
संबंधित पोस्ट:
SAX पार्सर का उपयोग कर XML फ़ाइलों को पार्स करना