2012-12-01 11 views
6

एक समाधान के लिए खोज रहे हैं, जबकि मैं क्रोमियम को एक बग सबमिट करने पर विचार -getComputedStyle और संक्रमण

एक तत्व एक संक्रमण है, तो getComputedStyle वापस नहीं करता है तो आप इसे जब तक के बाद संक्रमण खत्म हो गया है वापस जाने के लिए उम्मीद करेंगे क्या।

लंबा और छोटा - यदि मेरे पास 24px की ऊंचाई वाला तत्व है, और कक्षा जोड़ने से यह 80px (एक संक्रमण के साथ और से) की ऊंचाई देता है, और दोनों ऊंचाइयों को स्टाइलशीट में परिभाषित किया जाता है - अगर मैं सेट करता हूं उस वर्ग और जांच प्राप्त करें COMPputedStyle, यह अभी भी संक्रमण समाप्त होने तक मुझे गैर-वर्ग की ऊंचाई देता है।

क्या मैं के बारे में यहाँ बात कर रहा हूँ का एक नमूना: http://jsfiddle.net/bobbudd/REeBN/

(ध्यान दें:: इस बेला केवल वेबकिट में काम करने के लिए जा रहा है, यह एक ब्राउज़र

<html> 
    <head> 
     <style> 
      #foo { 
       display: inline-block; 
       background-color: red; 
       height: 24px; 
       padding: 4px 0; 
       width: 200px; 
       -webkit-transition-property: height; 
       -webkit-transition-timing-function: linear; 
       -webkit-transition-duration: 300ms; 
      } 
      #foo.changed { 
       height: 80px; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="foo"></div> 
     <p>before: <span id="before"></span></p> 
     <p>after: <span id="after"></span></p> 
     <script type="text/javascript"> 
      var foo 
      function checkFoo(e) { 
       foo.classList.toggle('changed'); 
       document.getElementById('before').innerText = window.getComputedStyle(foo, null).getPropertyValue("height"); 
      }; 

      window.addEventListener('load', function() { 
       foo = document.getElementById('foo'); 

       foo.addEventListener('webkitTransitionEnd', function(e){ 
       document.getElementById('after').innerText = window.getComputedStyle(foo, null).getPropertyValue("height"); 
       }); 

       foo.addEventListener('click', checkFoo, false); 
      }); 
     </script> 
    </body> 
</html> 

इस नमूने यहां की बेला हम लक्ष्यीकरण कर रहे हैं या नहीं - लेकिन मैंने एफएफ में भी एक ही समस्या का परीक्षण किया है और प्राप्त किया है)

समस्या यह है कि मेरे पास कई मामले हैं जहां मुझे अंतिम शैली जानने की आवश्यकता है (कुछ लोग "गणना कर सकते हैं "शैली) transitionEnd से पहले होता है।

या मुझे लगता है कि यह एक बड़े प्रश्न का हिस्सा है - एक तत्व की ऊंचाई को जानने के कई अलग-अलग तरीकों के साथ, समय पर एक विशिष्ट पल पर, प्राप्त करना चाहिए स्टाइलशीट (या शैली विशेषता) क्या नहीं कहता है संपत्ति माना जाता है?

और इससे पहले कि आप पूछें कि क्या मैं जेएस में अंतिम नंबर डाल सकता हूं, जवाब (दुर्भाग्य से) नहीं है।

क्या कोई संक्रमण समाप्त होने से पहले इस अंतिम मूल्य को प्राप्त करने का तरीका सोच सकता है?

+0

मैं काफी स्पष्ट रूप से सवाल समझ में नहीं आता:

cssRules = window.getMatchedCSSRules(this); var finalCssRule = ""; for(var i = 0; i < cssRules.length; i++){ if(cssRules[i].selectorText == "#foo.changed"){ finalCssRule = cssRules[i]; } } document.getElementById('final').innerText = finalCssRule.cssText; 

यहाँ एक प्रदर्शन है:

यहाँ एक कार्यान्वयन window.getMatchedCSSRules का उपयोग कर रहा है। इससे मुझे क्या पता चलता है कि तत्व वास्तव में ट्रिगर होने से पहले आप कुछ मान चाहते हैं? – enginefree

+0

नहीं - तत्व पहले से ही ट्रिगर किया गया है, इसलिए मुझे नया मान (80 पीएक्स) की उम्मीद है, लेकिन यह संक्रमण को समाप्त होने तक मुझे वह नया मान नहीं देता है। जैसे ही ट्रिगर हुआ है, मुझे इसे प्राप्त करने का एक तरीका चाहिए, लेकिन संक्रमण समाप्त होने से पहले। – borbulon

उत्तर

0

यह बिल्कुल एक बग नहीं है। getComputedStyle आपके द्वारा आमंत्रित किए जाने पर एक विशेषता के ग्राहक द्वारा प्रदान किए गए मान को वापस करने के लिए है। आप संक्रमण के दौरान यह आह्वान यदि आप के रूप में यहाँ का प्रदर्शन किया, संक्रमण के दौरान मूल्य प्राप्त होगा: http://jsfiddle.net/REeBN/1/

तरह से एक नियम के द्वारा निर्धारित रूप में आप अंतिम मान प्राप्त कर सकते शायद के उपयोग के माध्यम, शासन खुद का परीक्षण करके है cssRuleshttp://jsfiddle.net/REeBN/2/

+0

यही वह है जिसे मैं चिंतित था। यह एक ऐप ढांचे के लिए है, इसलिए किसी विशिष्ट ऐप के लिए cssRules प्राप्त करने से इसकी प्रक्रिया के मुकाबले अधिक प्रक्रिया साबित हो सकती है। हालांकि उत्तर देने के लिए धन्यवाद। – borbulon

+0

@el_bob मैंने एक उदाहरण जोड़ा है कि आप उचित नियम कैसे प्राप्त कर सकते हैं। –

+0

हाँ, मैंने देखा - धन्यवाद। चूंकि हम केवल ढांचे का निर्माण कर रहे हैं, न कि ऐप, यह ऐसा लगता है कि हमें यह देखने के लिए कि हम किस का उपयोग करने जा रहे हैं, सभी 'getMatchedCSSRule' चयनकर्ताओं को स्कोर करना होगा। दोबारा, मैंने इसे माना था और इसे इष्टतम के रूप में दूर फेंक दिया था।किसी भी जानकारी के माध्यम से विश्लेषण किए बिना अपने वर्तमान चयनकर्ताओं के साथ किस तत्व को दिखाना चाहिए, यह जानने का एक तरीका होना अच्छा होगा। – borbulon

संबंधित मुद्दे