जावास्क्रिप्ट और सीएसएस समय सिंक्रनाइज़ हैं?

Question

जावास्क्रिप्ट (टाइमआउट, अंतराल) और सीएसएस (एनिमेशन, देरी) समय सिंक्रनाइज़ किए गए हैं?

उदाहरण के लिए:

#anim1 { 
animation: anim1 10s linear; 
display: none; 
} 

anim1.style.display = "block" ; 
setTimeout(function() { 
anim2.style.webkitAnimation= 'anim2 10s linear'; 
}, 10000); 

anim2 करेंगे होना ठीक anim1 के अंत में शुरू हो रहा? क्या यह ब्राउज़र के आधार पर अलग है? इस मामले में मैं एक वेबकिट फोकस में अधिक रुचि रखता हूं।

ध्यान दें कि एनिम 1 समय असंगतताओं को लोड करने से बचने के लिए जावास्क्रिप्ट के माध्यम से ट्रिगर किया गया है।

एनबी: यह एक सैद्धांतिक प्रश्न है, उपर्युक्त कोड एक उदाहरण है और आपको इसे घर पर उपयोग नहीं करना चाहिए क्योंकि ऐसा करने के लिए और अधिक उचित साधन हैं।

Answer 1

जहाँ तक मुझे पता है, कोई गारंटी नहीं है। हालांकि, ऐसी घटनाएं हैं जिन्हें आप सुन सकते हैं;

anim1.addEventListener('animationend',function(){ 
    anim2.style.webkitAnimation= 'anim2 10s linear'; 
} 

ध्यान दें कि ये नए हैं, फिर भी विक्रेता उपसर्गों के लिए आपको खाते हैं; वेबकिट और ओपेरा के लिए webkitAnimationEnd और oanimationend।

जैसे ही मेरा मूल उत्तर (गलत तरीके से) सुझाव दिया गया है, तो transitionend (समान उपसर्गों के साथ) यदि आप एनिमेशन के बजाय सीएसएस संक्रमण का उपयोग करना चाहते हैं।

Answer 2

ऐसा करने का यह गलत तरीका है। इस बात की कोई गारंटी नहीं है कि वे सिंक हो जाएंगे, हालांकि यह संभावना है कि वे करीब होंगे।

घटनाक्रम प्रारंभ के लिए प्रदान किए जाते हैं, एक एनीमेशन की दोहराना समाप्त होते हैं।

http://developer.apple.com/library/safari/#documentation/AudioVideo/Reference/WebKitAnimationEventClassReference/WebKitAnimationEvent/WebKitAnimationEvent.html इन्हें विवरण दें।

उपयोग कोड की तरह:

element.addEventListener("webkitAnimationEnd", callfunction,false); 

इसे करने के लिए बाध्य करने के लिए।