जावास्क्रिप्ट की गणना करते समय सीएसएस एनीमेशन का उपयोग

Question

मैं एक वेब एप्लिकेशन विकसित कर रहा हूं जिसे स्टार्टअप पर सरणी के गुच्छा को उत्पन्न करने और गणना करने की आवश्यकता है। जब ऐसा होता है तो मैं लोडिंग पेज दिखाना चाहता हूं, और शायद सीएसएस एनिमेशन के साथ थोड़ा सा खेल सकता हूं, लेकिन ऐसा लगता है कि जावास्क्रिप्ट निष्पादित होने पर सीएसएस एनिमेशन लटकाएंगे। मेरे पास पहले से ही एक लोडिंग बार है जो प्रसंस्करण की प्रमुख घटनाओं पर अपडेट किया गया है, लेकिन मैं इसे थोड़ा आसान बनाने के लिए सीएसएस-संक्रमण का उपयोग करना चाहता हूं।

मैं सोच रहा था कि जावास्क्रिप्ट निष्पादित करते समय कुछ एनिमेट करने का कोई तरीका है या नहीं?

मुझे पता है कि मैं समय-समय पर ब्राउज़र को रीफ्रेश करने के लिए ब्राउज़र पर नियंत्रण वापस करने के लिए प्रबंधन कर सकता हूं, लेकिन मुझे यह मूर्खतापूर्ण लगता है कि जावास्क्रिप्ट के साथ पृष्ठभूमि में कुछ कंप्यूटिंग बस अपने पूरे इंटरफ़ेस को फ्रीज करें।

संपादित करें: यहाँ की एक गूंगा उदाहरण है कि मैं क्या बात कर रहा हूँ: http://jsfiddle.net/YWefx/13/ आप सीएसएस संक्रमण अक्षम करते हैं, बार प्रत्येक यात्रा पर अद्यतन किया जाता है, लेकिन अगर आप इसे सक्षम, केवल परिवर्तन अंत में हो जाएगा । तो मैं या तो प्रत्येक लूप के बीच 400 मिमी इंतजार कर रहा हूं, अंत में एक आसान एनीमेशन (प्रगति पट्टी प्रदर्शित करने के लाभ खोने), या बार एनिमेटिंग नहीं कर रहा है, लेकिन एनिमेशन को कुछ भी नहीं कर रहा है।

Answer 1

CSS3 एनीमेशन जावास्क्रिप्ट द्वारा अवरुद्ध नहीं होते हैं जब तक कि कुछ गहन प्रसंस्करण नहीं हो रहा है (जिस स्थिति में आप स्टटर प्राप्त कर सकते हैं)।

यदि आप भार के दौरान उन्हें ट्रिगर कर रहे हैं तो मैं उन्हें स्क्रिप्ट के उस हिस्से तक पहुंचने तक देरी कर सकता हूं।

इसके चारों ओर एक तरीका स्क्रिप्ट की शुरुआत में टाइम्सआउट को निश्चित समय पर एनीमेशन परिवर्तनों को ट्रिगर करने के लिए सेट करना है।

एक और (शायद बेहतर) विकल्प कुंजीफ्रेम का उपयोग करना होगा। लोडिंग शुरू होने से पहले इसे कॉल करना सुनिश्चित करें। http://dev.w3.org/csswg/css3-animations/#keyframes