मैं एनिमेटCSS3 संक्रमण के साथ गतिशील रूप से बनाए गए HTML तत्व को आजमा रहा हूं।गतिशील रूप से बनाए गए तत्वों के लिए CSS3 संक्रमण
मैं चाहता हूं कि एनीमेशन तत्व बनने से ठीक पहले शुरू हो।
इन के लिए मैं एक वर्ग उस तत्व की मूल स्थिति सेट और फिर मैं jQuery सीएसएस() विधि
लेकिन नए तत्व यह सिर्फ किसी भी संक्रमण के बिना लक्ष्य की स्थिति में apears द्वारा लक्ष्य स्थिति सेट बनाने ।
यदि मैं नया सीएसएस मान सेट करने के लिए 0ms के सेटटाइमआउट का उपयोग करता हूं तो यह काम करता है।
कुछ ऐसा है जो मैं गलत कर रहा हूं? या एक सीमा है? मुझे नहीं लगता कि मुझे सेटटाइमआउट वर्कअराउंड का उपयोग करने की आवश्यकता होनी चाहिए।
धन्यवाद!
अद्यतन: यहां प्रयोग करने के लिए jsfiddle.net पर चल रहे कोड के साथ एक लिंक है। http://jsfiddle.net/blackjid/s9zSH/
अद्यतन मैं जवाब में समाधान के साथ उदाहरण नवीनीकृत किया है।
http://jsfiddle.net/s9zSH/52/
यहाँ एक पूरी तरह से काम कर रहे उदाहरण कोड
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
//Bind click event to the button to duplicate the element
$(".duplicate").live("click", function (e){
var $to = $("#original .square").clone()
$("body").append($to);
if($(e.target).hasClass("timeout"))
//With setTimeout it work
setTimeout(function() {
$to.css("left", 200 + "px");
},0);
else if($(e.target).hasClass("notimeout"))
// These way it doesn't work
$to.css("left", 200 + "px");
});
</script>
<style type="text/css">
.animate{
-webkit-transition: all 1s ease-in;
}
.square{
width:50px;
height:50px;
background:red;
position:relative;
left:5px;
}
</style>
</head>
<body>
<div id="original">
<div class="square animate"></div>
</div>
<button class="duplicate timeout">duplicate with setTimeout</button>
<button class="duplicate notimeout">duplicate without setTimeout</button>
</body>
</html>
परिशिष्ट: जबकि आपको टाइमआउट का उपयोग करने की आवश्यकता नहीं है, कभी-कभी यह अच्छा हो सकता है। यह वास्तव में आपके आवेदन पर निर्भर करता है। शैली के सिंक्रोनस पुनर्मूल्यांकन को मजबूर करना, यदि अक्सर किया जाता है, तो आपका यूआई स्टटर बना सकता है। यदि आपको ऐसा लगता है, तो कुछ फ्रेम पर एक जटिल एनीमेशन को तोड़ने/बढ़ाने के लिए सावधानीपूर्वक टाइमआउट का उपयोग करें। – mmaclaurin
धन्यवाद, यह पहला स्पष्टीकरण है जिसे मैंने पाया है * क्यों * एक सेटटाइमआउट सीएसएस संक्रमण को मजबूर करने के लिए प्रभावी है। –
वाह, बढ़िया! आपने मेरा दिन बचाया कारण जानने के लिए काफी समय बर्बाद कर दिया, अंततः आप इसे हल किया। एक बार फिर धन्यवाद! –