2012-10-17 21 views
15

को कैसे रोकें मैं प्रगति पर एक संक्रमण को रोकना चाहता हूं।CSS3 संक्रमण

मुझे कुछ संदर्भ [1] [2] इंटरनेट के चारों ओर बिखरे हुए हैं लेकिन मैं इसे एक साथ टुकड़ा नहीं कर सकता। http://jsfiddle.net/thomseddon/gLjuH/

धन्यवाद

[1] https://twitter.com/evilhackerdude/status/20466821462

[2] github.com/madrobby/zepto/:

यहाँ एक (संदर्भ के लिए jQuery और सीएसएस ट्रांजिट के साथ) पहला सुझाव की बेला है मुद्दों/508

+0

इसे जांचें शायद http://stackoverflow.com/questions/5312289/interrupting-stop-a-css3-transition-on-the-actual-position-state – Afshin

+0

धन्यवाद, यह भी –

+0

से जुड़ा होना चाहिए यह: http://jsfiddle.net/thomseddon/gLjuH/3/ –

उत्तर

9

तो मैं यह पता लगा: http://jsfiddle.net/thomseddon/gLjuH/3/

चाल eac स्थापित करने के लिए है एच सीएसएस संपत्ति आप अपने वर्तमान मूल्य (संभवतः मध्य संक्रमण) के लिए एनिमेट कर रहे हैं जैसे: $(this).css('prop', $(this).css('prop')); (संभवतः $ (this) .data (props) के साथ तत्व में किसी ऑब्जेक्ट में सभी गुणों को संग्रहीत करना चाहते हैं; और उनके माध्यम से लूप)।

एक बार जब आप स्पष्ट रूप से गुण सेट कर लेते हैं तो आप पिछले एनीमेशन को ओवरराइड करने के लिए 0s एनीमेशन चला सकते हैं और प्रभावी रूप से तत्व को रोक सकते हैं।

+3

jsfiddle के लिए धन्यवाद। मैंने कुछ रिफैक्टरिंग किया और इसे यहां मूल अवधारणा में तोड़ दिया: http://jsfiddle.net/jedhunsaker/gLjuH/13/ – jedmao

+0

@mrjedmao - बेवकूफ लिंक मर चुका है :( – Danield

+1

@Danield क्षमा करें, मैंने हाल ही में अपना नाम बदल दिया यह अब http://jsfiddle.net/jedmao/gLjuH/13/ – jedmao

1

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

element.style.top=getComputedStyle(element).top; 

और यही वह है।