जांचें कि क्या तत्व एनिमेटेड किया जा रहा है CSS3

Question

क्या यह जांचने का कोई तरीका है कि तत्व एनिमेटेड है या नहीं?

लेकिन नहीं एनिमेटेड किया जा रहा jQuery के animate के साथ, लेकिन css3 के संक्रमण के साथ ..

समस्या मैं है है

... मैं इस स्लाइडर है, तीर पर मैं दे क्लिक करें यह

left = left+200 

जहां बाईं या तो

element.position().left 

या

है

parseInt(element.css("left")); 

(यह वास्तव में कोई फर्क नहीं पड़ता, समस्या के साथ होता है या तो)

तत्व

transition: left 400ms ease-in-out; 

हां, तो तीर पर उपयोगकर्ता क्लिक करता है एक बार और उसके बाद फिर से पहले के साथ एनिमेटेड किया जा रहा है एनीमेशन खत्म होता है, इसकी स्थिति के आधार पर बाएं रिटर्न मूल्य (इसलिए कहने के बजाय .. 400 पीएक्स, यह 235.47 पीएक्स वापस आ सकता है क्योंकि इसे एनीमेशन के बीच में क्लिक किया गया था) ..

Answer 1

जब आप left किसी तत्व की संपत्ति को बदलते हैं , आप अब सहयोग कर सकते हैं इसके साथ ओलियन मान (उदाहरण के लिए data() का उपयोग करके) और संक्रमण को इंगित करने के लिए इसे true पर सेट करें। फिर, आप transition end event (जो ब्राउज़र के आधार पर भिन्न होता है) से जुड़ सकते हैं और संक्रमण को समाप्त करने के संकेत देने के लिए बूलियन मान को अपने हैंडलर से false पर सेट कर सकते हैं। तो यह नहीं है कि

yourElement.on(
    "transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd", 
    function() { 
     $(this).data("transitioning", false); // Transition has ended. 
    } 
); 

---

if (!yourElement.data("transitioning")) { 
    // No transition active, compute new position. 
    var theNewLeft = yourElement.position().left + 200; 
    // Set new position, which will start a new transition. 
    yourElement.data("transitioning", true).css("left", theNewLeft); 
}