दिलचस्प पोस्ट
पायथन का उपयोग सूची की गिनती के अंतर्गत गणना करना बहु-थ्रेडेड या async वातावरण में उपयोग किए जा सकने वाले संसाधनों को कैसे सुरक्षित करें? से बचने के लिए jQuery का नुकसान एक हैश की चाबी कैसे पाएं? CodeIgniter: नियंत्रक के अंदर लोड नियंत्रक गोलाकार कोनों के साथ एंड्रॉइड में एक दृश्य कैसे बनाएं सी: अंतराल के लिए एक फ्लोट कैसे लपेटो Dijkstra के एल्गोरिथ्म और ए-स्टार की तुलना कैसे होती है? पायथन में डिवीजन ऑपरेटर का उपयोग करते समय मुझे एक दशमलव मान कैसे प्राप्त होगा? Play 2.0.4 में दैनिक + ऑनस्टार्ट () कार्य शेड्यूल कैसे करें? पायथन में एकाधिक छोरों से कैसे बाहर निकलना है? तालिका उत्परिवर्तित है, ट्रिगर / फ़ंक्शन इसे नहीं देख सकता है (औसत ग्रेड नीचे 2.5 से गिरने से रोकना) ऑडियो यूनिट के माध्यम से आईफोन आउटपुट ध्वनि रिकॉर्ड करने में कोई मेरी सहायता कर सकता है I शीट आदेश में शीट नाम प्राप्त करने के लिए एक्सेल ऑलेडीबी का उपयोग करना अजगर – क्या किसी सूची को किसी सूची या डिक्शनरी में संग्रहीत करने का कोई तरीका है, जब सूचकांक (या कुंजी) को इसे संग्रहीत फ़ंक्शन बंद कर दिया जाता है?

एनीमेशन और संक्रमण का संयोजन ठीक से काम नहीं कर रहा है

मैं कुछ बुनियादी CSS3 एनिमेशन डाल करने की कोशिश कर रहा हूं इसका उद्देश्य एक बटन के क्लिक ईवेंट पर एक वर्ग को टॉगल करना और जोड़ा वर्ग पर आधारित एक div को चेतन करना है। यह कोड फ़ायरफ़ॉक्स में टॉगल के पहले चलने के लिए पूरी तरह से काम करता है, लेकिन क्रोम जैसे अन्य ब्राउज़रों के लिए और फ़ायरफ़ॉक्स में अगले आवृत्ति के लिए रूपांतरण एक आँख की झपकी में टॉगल किया जाता है। कृपया मुझे समझने में मदद करें कि क्या गलत हो रहा है।

स्निपेट:

$('button').click(function() { $('div').toggleClass('clicked'); }); 
 div { background-color: #ccc; height: 100px; width: 100px; transition-property: top, left; transition-duration: 1s; transition-timing-function: linear; position: relative; top: 0; left: 0; } .clicked { animation-name: clicked; animation-duration: 1s; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes clicked { 0% { top: 0; left: 0; } 100% { top: 100px; left: 100px; } } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button type="button">Click Me!</button> <div></div> 

मैंने यहां एक बेला तैयार किया है ।

Solutions Collecting From Web of "एनीमेशन और संक्रमण का संयोजन ठीक से काम नहीं कर रहा है"

क्रोम के साथ यह एक ज्ञात व्यवहार है ऐसा लगता है कि फ़ायरफ़ॉक्स संक्रमण के साथ आसानी से एनीमेशन को हटाने में सक्षम है लेकिन क्रोम ऐसा नहीं करता। मैंने इस व्यवहार को पहले भी इस धागे में देखा था।

क्यों एनीमेशन को हटाने क्रोम में संक्रमण के साथ काम नहीं करता है?

चूंकि मैं 100% बेवकूफ़-प्रूफ स्पष्टीकरण नहीं दे सकता है कि ऐसा क्यों होता है, हम क्रोम में त्वरित रेंडरिंग के बारे में इस HTML5 रॉक आलेख के आधार पर कुछ हद तक इसका व्याख्या कर सकते हैं और क्रोम में GPU त्वरित संमिश्रण के बारे में यह एक है ।

क्या होने लगता है कि यह तत्व अपनी प्रतिपादन परत लेता है क्योंकि इसमें स्पष्ट स्थिति संपत्ति सेट है एनीमेशन के कारण जब एक परत (या उसका हिस्सा) अवैध हो जाता है, तो क्रोम केवल उस परत को दोहराने देता है जो बदलाव से प्रभावित होता है जब आप क्रोम डेवलपर कंसोल खोलते हैं, "पेंट रिट्स दिखाएँ" विकल्प पर स्विच करें, तो आप देखेंगे कि जब एनीमेशन हो रहा हो तो क्रोम केवल वास्तविक तत्व को पेंट करता है जो एनिमेटेड हो रहा है

हालांकि, एनीमेशन के प्रारंभ और अंत में पूरे पेज को फिर से रंगना हो रहा है जो तत्व को अपनी मूल स्थिति में तुरंत रखता है और इस तरह संक्रमण के व्यवहार को ओवरराइड कर रहा है।

 $('button').click(function(){ $('div').toggleClass('clicked'); }); 
 div{ background-color: #ccc; height: 100px; width: 100px; transition-property: top, left; transition-duration: 1s; transition-timing-function: linear; position: relative; top: 0; left: 0; } .clicked{ animation-name: clicked; animation-duration: 1s; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes clicked{ 0% {top: 0; left: 0;} 100% {top: 100px; left: 100px;} } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button type="button">Click Me!</button> <div></div> 

यह एक अपेक्षित व्यवहार है आपको दो अलग-अलग एनिमेशन का उपयोग करना होगा या केवल संक्रमण के साथ छड़ी करना होगा

एक संक्रमण एक एनीमेशन है, सिर्फ एक ही है जिसे दो अलग-अलग राज्यों के बीच किया जाता है – अर्थात एक प्रारंभिक राज्य और एक अंत राज्य दराज मेनू की तरह, प्रारंभिक स्थिति खुली हो सकती है और अंत राज्य को बंद किया जा सकता है, या इसके विपरीत।

यदि आप ऐसा कुछ करना चाहते हैं जो विशेष रूप से एक प्रारंभिक स्थिति और एक अंत राज्य को शामिल नहीं करता है, या आपको संक्रमण में कीफ्रेम पर अधिक ठीक अनाज नियंत्रण की आवश्यकता है, तो आपको एनीमेशन का उपयोग करना होगा

संक्रमण के साथ तत्व को चेतन करने का यह तरीका है:

 $('button').click(function() { $('div').toggleClass('clicked'); }); 
 div { background-color: #ccc; height: 100px; width: 100px; transition-property: top, left; transition-duration: 1s; transition-timing-function: linear; position: relative; top: 0; left: 0; } .clicked { top: 100px; left: 100px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button type="button">Click Me!</button> <div></div>