CSS3 चेन एनिमेशन

Question

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

मेरा सवाल है, इन एनिमेशनों को "चेन" करने का सबसे अच्छा तरीका क्या है। क्या मुझे स्क्रीन को नीचे ले जाने के लिए एक एनीमेशन होना चाहिए, पाठ को हाइलाइट करने के लिए एक अलग एनीमेशन और शेष स्क्रीन को नीचे जाने के लिए एक तीसरी एनीमेशन होनी चाहिए? फिर, क्या मुझे एनीमेशन विलंब को पूरा करने के बाद केवल दूसरी और तीसरी एनिमेशन शुरू करने के लिए एनीमेशन देरी सेट करनी चाहिए? मुझे लगता है कि अलग-अलग एनिमेशन बनाने के साथ मैं ठीक हूं, जो एक साथ बंधे होंगे, लेकिन मुझे यकीन नहीं है कि इन एनिमेशन को अगली एनीमेशन शुरू करने के लिए कैसे ट्रिगर करना चाहिए।

Answer 1

एनिमेशन को चेन करने के कई तरीके हैं - -वेबिट-एनीमेशन-देरी का उपयोग करते हुए शुद्ध सीएसएस तरीका है, जहां आप एकाधिक एनिमेशन परिभाषित करते हैं और ब्राउजर को उन्हें शुरू करते समय बताते हैं, उदा।

-webkit-animation: First 1s, Second 2s; 
-webkit-animation-delay: 0s, 1s; 
/* or -moz etc.. instead of -webkit */ 

एनीमेशन अंत घटना से जुड़ना एक और तरीका है, फिर दूसरा शुरू करें। मुझे यह अविश्वसनीय लगता है, हालांकि।

$('#id') 
    .bind('webkitAnimationEnd',function(){ Animate2() }) 
    .css('-webkit-animation','First 1s'); 

तीसरा तरीका जावास्क्रिप्ट में टाइमआउट सेट करना और सीएसएस एनीमेशन संपत्ति को बदलना है। यही वह समय है जो मैं सबसे अधिक लचीला करता हूं, क्योंकि यह सबसे लचीला है: आप समय को आसानी से बदल सकते हैं, एनीमेशन अनुक्रमों को रद्द कर सकते हैं, नए और अलग-अलग जोड़ सकते हैं, और मुझे कभी भी असफल समस्या नहीं मिली है जैसे कि मैं संक्रमण के लिए बाध्यकारी हूं घटना।

$('#id').css('-webkit-animation','First 1s'); 
window.setTimeout('Animate2("id")', 1000); 
function Animate2.... 

यह एक बाँध से भी अधिक कोड, और सीएसएस की तुलना में अधिक, निश्चित रूप से है, लेकिन यह relable और अधिक सुविधाजनक है, imho।

Answer 2

सिर्फ "दाएं" का उपयोग करके क्रोम 16 में एनिमेशन की एक श्रृंखला का निर्माण कर रहा था - और सबसे सामान्य तरीका: वेबकिट एनीमेशन पर दूसरी एनीमेशन फायरिंग, एनीमेशन को परिभाषित करने वाले वर्ग नियम से संदर्भित कीफ्रेम द्वारा परिभाषित एनिमेशन के साथ- * चर, और लक्षित तत्वों को कक्षा का नाम जोड़कर ट्रिगर किया गया। यह "दाएं" है क्योंकि यह अपेक्षाकृत एक समय के सभी समय अंतराल को परिभाषित करता है, क्योंकि यह सबसे लचीला है (उदाहरण के लिए प्रत्येक एनीमेशन में अलग-अलग तत्व शामिल हो सकते हैं, जिन्हें आप एक कीफ्रेम के भीतर नहीं कर सकते), और क्योंकि यह CSS3 का लाभ उठाने को अधिकतम करता है।

यह असफल रहा। अगले एक को फायर करने से पहले पूरा संक्रमण के वर्गनाम को हटाकर इसे फिक्स्ड करें!

Answer 3

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

आप एक कतार के रूप में एक सरणी बना सकते हैं, और उस तत्व को जोड़ सकते हैं जिसे आप एनिमेट करना चाहते हैं (प्रभाव और एनीमेशन प्रकार जैसे कुछ विकल्पों के साथ)। फिर, जब आप एनीमेशन समाप्त होते हैं तो अगली एनीमेशन पर जाकर आप इस कतार को संसाधित कर सकते हैं। यह एनीमेशन या तो एक अलग तत्व या एक ही तत्व के लिए एक बाद की एनीमेशन हो सकता है। एनीमेशन समाप्त होने पर className से एनीमेशन कक्षा को निकालना याद रखें। प्रत्येक चरण के लिए, उचित सीएसएस कक्षाएं जोड़ें और फिर एनीमेशन समाप्त होने पर उन्हें हटा दें। क्योंकि हम animationEnd सुनते हैं, समय केवल सीएसएस के साथ किया जा सकता है, केवल जावास्क्रिप्ट को प्रोसेसिंग छोड़कर।

यह इस तरह के एक कम से कम काम है कि अगर अपनी परियोजना पहले से ही jQuery की तरह एक पुस्तकालय का उपयोग नहीं कर रहा है, तो आप सिर्फ वेनिला जे एस का उपयोग करना चाहिए है।

मैंने कुछ शोध किया और कुछ एक साथ रखने में कामयाब रहा। एक उदाहरण के लिए this fiddle देखें:

var manager = new AnimationManager(); 
manager.enqueue(animations).animate(); 

अंतिम उत्पाद मेरी github repo पर है।

आशा है कि यह आपको कुछ अंतर्दृष्टि/सहायता प्रदान करेगा।