वर्तमान में मेरी Angular2 साइट में कुछ एनिमेशन NG2 के animations घटक में बनाया का उपयोग कर लागू करने के लिए कोशिश कर रहा। अब तक मैं प्रलेखन में प्रदान किए गए कोणीय 2 Developer Guide - Animations के माध्यम से काम कर रहा हूं। इसके साथ ही मैंने कुछ प्रश्नों में भाग लिया है, मैं उम्मीद कर रहा था कि एसओ समुदाय में सहायता करने में सक्षम हो सकता है। मेरा पहला प्रश्न/समस्या यह है कि ऐसा लगता है कि एनीमेशन (जो मैं बता सकता हूं) से नहीं चलता है पेज लोड ऐसा लगता है कि अगर मैं एक दृश्य में स्विच करता हूं तो एनीमेशन के साथ दृश्य पर वापस आ जाता है। इस कोड को मैं वर्तमान में सवाल में एनीमेशन के लिए उपयोग कर रहा हूँ है (मैं पूरी घटक अगर वांछित प्रदान कर सकते हैं):Angular2 एनिमेशन और पृष्ठ संक्रमण
animations: [
trigger('kissState', [
state('in', style({opacity: 1})),
transition('void => *', [
style({opacity: 0}),
animate('250ms ease-in-out')
]),
transition('* => void', [
animate('250ms ease-in-out', style({opacity: 0}))
])
])
]
मैं यह धारणा थी कि void => *opacity:0 करने के लिए मेरे डोम तत्व स्थापित करेगा और एक बार यह in में यह देखने के लिए दर्ज किया गया कि यह opacity:1 होगा। मुझे लगता है कि एक और समस्या यह है कि मेरे नेविगेशन मोबाइल पर काम नहीं कर रहे हैं। मैंने वास्तव में उन्हें अभी तक अपने सर्वर पर नहीं ले जाया है, लेकिन स्थानीय रूप से विकास करना और नोड localtunnel के माध्यम से अपने मोबाइल डिवाइस को देखकर कोई एनिमेशन नहीं लगता है। ऐसा इसलिए हो सकता है क्योंकि अजीब तरीका localtunnel संचालित होता है इसलिए मैं इसके बारे में बहुत चिंतित नहीं हूं जब तक कि मैं वास्तव में इसे वास्तविक सर्वर पर परीक्षण नहीं कर सकता। यहाँ अन्य एनीमेशन है विशेष रूप से यह है कि जब मैंने देखा कि यह अपने मोबाइल डिवाइस पर काम कर रहा था: रूटर दृश्य पर
animations: [
trigger('offScreenMenu', [
state('inactive', style({
opacity: 0,
zIndex: -10
})),
state('active', style({
backgroundColor: 'rgba(255, 255, 255, 0.8)',
zIndex: 10
})),
transition('inactive => active', animate('250ms ease-in')),
transition('active => inactive', animate('250ms ease-out'))
])
]
एक आखिरी समस्या मैं कर रहा किया गया है जो Angular2 टीम द्वारा एक ज्ञात समस्या है है परिवर्तन। वर्तमान में एक SO question है जो इस पते को और कोणीय 2 रेपो पर टिकट (एसओ प्रश्न में गुंटर ज़ोचबॉयर द्वारा टिप्पणी में उल्लिखित) है। इसके साथ, अगर कोई मौजूदा कामकाज हुआ तो मैं उत्सुक था? कुछ संक्षिप्त शोधों के माध्यम से ऐसा लगता है कि एक बार ng-enter और ng-leave लागू किया जा सकता है, इसके लिए कोई भी अपने सीएसएस के भीतर उपयोग कर सकता है, लेकिन जो कुछ मैं ये कह सकता हूं उससे चरणबद्ध हो गया है। अभी भी थोड़ा और शोध करने की ज़रूरत है, इसलिए मैं इसके बारे में गलत हो सकता हूं।
किसी भी मदद के लिए अग्रिम धन्यवाद!
अद्यतन (7.7.16): ठीक है इसलिए मैंने इसके आसपास वापस आने का फैसला किया और पेज लोड एनीमेशन के समय के साथ गड़बड़ करने के बाद यह काम करता प्रतीत होता है। हालांकि मुझे ध्यान देने के लिए लगभग 1000ms एनीमेशन करना है। जो मुझे प्रश्नों (या अधिक विचार) में लाता है जो मुझे विश्वास है कि डीओएम पूरी तरह से लोड होने से पहले एनीमेशन निष्पादित करना शुरू कर देता है। जो थोड़ा अजीब लगेगा। अभी भी मोबाइल एनीमेशन स्थिति पर काम कर रहा है। ऐसा लगता है कि मैं फिलहाल गिथब रेपो पर एक मुद्दा दर्ज कर रहा हूं क्योंकि मैंने इसे थोड़ा सा गड़बड़ कर दिया है और इसे काम पर नहीं लग रहा है। एनजी 2 के लिए काम नहीं कर रहे मोबाइल एनीमेशन का कोई भी उल्लेख नहीं है।
अद्यतन (7.13.16): ऐसा लगता है कि Angular2 टीम ने आरसी 5 के साथ रिलीज करने के लिए कुछ फिक्स किए हैं जो मेरी उपरोक्त चिंताओं को संबोधित करना चाहिए। अपने खुद के प्रश्न और करीब जवाब देने जा रहे हैं।