चौड़ाई संपत्ति पूछताछ किए बिना संक्रमण काम नहीं कर रहा है

Question

मैं जेएस में div में कक्षा जोड़कर एक क्लिक ईवेंट पर संक्रमण के साथ एक translateX एनिमेट करना चाहता हूं। सीएसएस फ़ाइल में ट्रांसफॉर्म और संक्रमण गुण जोड़े गए हैं।

var widget = document.getElementById('widget');  
widget.style.display = 'block'; 
document.getElementById('widget2').clientWidth; //comment this line out and it wont work 
widget.className = 'visible'; 

यह केवल अगर मैं वर्ग को जोड़ने से पहले डोम में किसी भी तत्व की चौड़ाई संपत्ति क्वेरी काम करता है। https://jsfiddle.net/5z9fLsr5/2/

किसी को भी यह क्यों काम नहीं कर रहा व्याख्या कर सकते हैं:

यहाँ एक jsfiddle है?

Answer 1

ऐसा इसलिए है क्योंकि आप अपना संक्रमण शुरू करते हैं और display संपत्ति को "एक ही समय में संशोधित करते हैं"। फेरबदल display किसी भी संक्रमण को बर्बाद कर देगा (प्रशस्ति पत्र की जरूरत, बेशक), तो यह एक अच्छा विचार बदल रहा है और वास्तविक transiting display अलग करने के लिए होगा:

https://jsfiddle.net/5z9fLsr5/3/

document.getElementById('showWidget').addEventListener('click', function(e) { 
 
    e.preventDefault(); 
 
    var widget = document.getElementById('widget');  
 
    widget.style.display = 'block'; 
 
    //document.getElementById('widget2').clientWidth; 
 
    window.setTimeout(function(){ 
 
     widget.className = 'visible'; 
 
    },0); 
 
});

#widget { 
 
    width: 200px; 
 
    height: 80px; 
 
    background: black; 
 
    position: absolute; 
 
    transition: transform 500ms; 
 
    transform: translateX(-200px); 
 
    display: none; 
 
} 
 
#widget.visible { 
 
    transform: translateX(200px); 
 
} 
 

 

 

 
#widget2 { 
 
    position: absolute; 
 
    right: 0 
 
}

<a href="#" id="showWidget">show</a> 
 
<div id="widget"></div> 
 
<div id="widget2">xxx</div>

का पता कर रहा clientWidth लगता है कुछ समय के लिए निष्पादन को "रोकें", इसलिए यह भी काम करता है।

Answer 2

यहां समस्या display: none की आरंभिक सेटिंग है। ब्राउज़र के लेआउट मैनेजर के लिए, यह इंगित करता है कि लेआउट किया जाना चाहिए जैसे प्रश्न में तत्व डीओएम में भी नहीं था (यह अभी भी है, आपको दिमाग है)। इसका मतलब है कि सीएसएस शैली transform: translateX(-200px); लागू नहीं किया जाएगा।

ऐसा करने से:

widget.style.display = 'block'; 
widget.className = 'visible'; 

दोनों संशोधनों से चलाता है अनिवार्य रूप से एक ही समय में - लेआउट केवल फिर से किया जाता है के बाद दोनों के बयानों के बाद मार दिया। document.getElementById('widget2').clientWidth; डालने (clientHeight भी काम करता है) लेआउट मैनेजर को पुनर्निर्मित करने के लिए ट्रिगर करता है, इस प्रकार transform: translateX(-200px) पंजीकृत करता है।

के रूप में दूसरों मुझे पहले उल्लेख किया है, समाधान या तो opacity बजाय display (यह मेरा विकल्प होगा) का उपयोग करने, या 0 की देरी (Why is setTimeout(fn, 0) sometimes useful? देखें) के साथ setTimeout उपयोग करने के लिए है।