नए तत्वों पर सीएसएस संक्रमण

मुझे नव निर्मित डोम तत्वों पर सीएसएस संक्रमण का उपयोग करने का कोई तरीका नहीं मिल रहा है।नए तत्वों पर सीएसएस संक्रमण

मान लें कि मेरे पास एक खाली HTML दस्तावेज़ है।

<body> 
    <p><a href="#" onclick="return f();">click</a></p> 
</body>

मैं भी इस सीएसएस

#id { 
    -moz-transition-property: opacity; 
    -moz-transition-duration: 5s; 
    opacity: 0; 
} 

#id.class { 
    opacity: 1; 
}

है और इस

function f() { 
    var a = document.createElement('a'); 
    a.id = 'id'; 
    a.text = ' fading in?'; 
    document.getElementsByTagName('p')[0].appendChild(a); 
    // at this point I expect the span element to be with opacity=0 

    a.className = 'class'; 
    // now I expect the css transition to go and "fade in" the a   

    return false; 
}

जे एस लेकिन, जैसा कि आप http://jsfiddle.net/gwxkW/1/ पर देख सकते हैं जब आप तत्व तुरंत दिखाई देता है पर क्लिक करें।

जावास्क्रिप्ट और सीएसएस इंजन के बीच मैं एक timeout() में वर्ग सेट मैं अक्सर परिणाम को पाने के करने की कोशिश, लेकिन मेरे लिए यह अधिक एक दौड़ लगता है। क्या सुनने के लिए कुछ विशिष्ट घटना है? मैंने document.body.addEventListener('DOMNodeInserted', ...) का उपयोग करने की कोशिश की लेकिन यह काम नहीं कर रहा है।

मैं नव निर्मित तत्वों पर सीएसएस संक्रमण कैसे लागू कर सकता हूं?

स्रोत

2012-08-23 Vito De Tullio

'सेटटाइमआउट' कार्यों के साथ कक्षा का नाम सेट करना, लेकिन केवल तभी जब मेरे लिए देरी 6 एमएमएस या अधिक हो। एक अच्छा तरीका सुनिश्चित नहीं है। – pimvdb

हाँ, मैंने कुछ कम मिलीसेकंड मान (श्रेणी 0-10) की कोशिश की और ज्यादातर बार यह 5-6 एमएस के साथ काम करता है, लेकिन मुझे लगता है कि यह गलत दृष्टिकोण है। मुझे उम्मीद थी कि "इस पल से सीएसएस लागू होने पर" कुछ प्रकार की घटना से संबंधित है, लेकिन मुझे नहीं पता कि वे –

हैं http: // stackoverflow देखें।ऐसा करने के लिए एक साफ तरीके की चर्चा के लिए कॉम/प्रश्न/18564 9 42/क्लीन-वे-टू-प्रोग्रामेटिक-उपयोग-सीएसएस-संक्रमण-से-जेएस। – Nickolay

requestAnimationFrame() (https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame) फ़ायरफ़ॉक्स, क्रोम और सफारी में काम करता प्रतीत होता है। setTimeout() पर एक और विश्वसनीय, तार्किक समाधान। पुराने ब्राउज़रों (आईई 8) के लिए, इसे पॉलीफिल की आवश्यकता होगी (स्वाभाविक रूप से, संक्रमण नहीं होगा, लेकिन सीएसएस अभी भी बदल जाएगा)।

स्रोत

2014-12-22 20:20:03 Jason

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

फ़ायरफ़ॉक्स (यहां तक कि setTimeout() का उपयोग) में इस कोड के साथ, पाठ तुरंत पता चलता है:

function f() { 
    var a = document.createElement('a'); 
    a.id = 'id'; 
    a.innerHTML = ' fading in?'; 
    document.getElementsByTagName('p')[0].appendChild(a); 
    // at this point I expect the span element to be with opacity=0 

    setTimeout(function() { 
     a.className = 'fadeIn'; 
    }, 10); 
    return false; 
}

लेकिन, अगर मैं एक संपत्ति है कि केवल लेआउट के बाद वापस किया जा सकता का अनुरोध करके एक पुनर्प्रवाहित मजबूर, यह तो शुरू होता है फ़ायरफ़ॉक्स में काम करने के लिए:

function f() { 
    var a = document.createElement('a'); 
    a.id = 'id'; 
    a.innerHTML = ' fading in?'; 
    document.getElementsByTagName('p')[0].appendChild(a); 
    // at this point I expect the span element to be with opacity=0 

    // request property that requires layout to force a layout 
    var x = a.clientHeight; 
    setTimeout(function() { 
     a.className = 'fadeIn'; 
    }, 10); 
    return false; 
}

इसके अलावा, एक बार मैं अनुरोध है कि संपत्ति एक लेआउट के लिए मजबूर करने के बाद, मैं भी setTimeout() को हटा सकते हैं और एनीमेशन फ़ायरफ़ॉक्स में काम करता है।

function f() { 
    var a = document.createElement('a'); 
    a.id = 'id'; 
    a.innerHTML = ' fading in?'; 
    document.getElementsByTagName('p')[0].appendChild(a); 
    // at this point I expect the span element to be with opacity=0 

    // request property that requires layout to force a layout 
    var x = a.clientHeight; 
    a.className = 'fadeIn'; 
    return false; 
}

आप Chrome और Firefox दोनों में यहाँ यह पिछले एक काम देख सकते हैं: http://jsfiddle.net/jfriend00/phTdt/

और, यहाँ एक लेख है कि घटना की चर्चा है: http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html

स्रोत

2012-08-23 10:04:17 jfriend00

लिंक के लिए धन्यवाद: जबकि मुझे यह समाधान थोड़ा सा * हैकिश * मिला है, कम से कम यह स्पष्ट रूप से प्रेरित है –

संपत्ति चाल कई वस्तुओं के लिए काम नहीं करती है, हालांकि; केवल देरी करता है। –

मैं लेआउट को गति प्रदान करने के लिए एक अच्छा रास्ता मिल गया और संक्रमण काम करने के बस डोम के तत्व जोड़कर बाद:

window.getComputedStyle(element).opacity;

स्रोत

2014-06-30 13:13:12 demian85

टिम Taubert द्वारा इस आलेख के नीचे उस समाधान पर भी चर्चा की गई है: https://timtaubert.de/blog/2012/09/css-transitions-for- गतिशील-created-dom-elements/ – robocat

मैं उपयोग नहीं करूँगा '.cssText' हालांकि, क्योंकि यह काफी भारी है (सभी शैलियों को क्रमबद्ध करता है)। – Nickolay

इसके बजाय बस '.opacity' का उपयोग करें, इसका उपयोग वैसे भी किया जाना चाहिए, क्योंकि यह शैली है जिसे रेंडर इंजन – timaschew

नए तत्वों पर सीएसएस संक्रमण

उत्तर

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