CSS3-Übergänge zu dynamisch erstellten Elementen
Ich versuche zuanimiere ein dynamisch erstelltes HTML-Element mit CSS3 Übergänge.
Ich möchte, dass die Animation unmittelbar vor dem Erstellen des Elements gestartet wird.
Für diese erstelle ich eine Klasse, die die ursprüngliche Position des Elements setzt und dann setze ich die Zielposition durch die jquerycss () Method
Aber das neue Element wird nur an der Zielposition ohne Übergang angezeigt.
Wenn ich setTimeout von 0ms verwende, um den neuen CSS-Wert festzulegen, funktioniert das.
Es gibt etwas, was ich falsch mache? oder ist das eine begrenzung? Ich glaube nicht, dass ich die setTimeout-Problemumgehung verwenden muss.
Vielen Dank
AKTUALISIERE: Hier ist ein Link mit dem Code, der auf jsfiddle.net ausgeführt wird, damit Sie experimentieren können.http: //jsfiddle.net/blackjid/s9zSH
AKTUALISIERE Ich habe das Beispiel mit der Lösung in der Antwort aktualisiert.
http: //jsfiddle.net/s9zSH/52
Hier ist ein voll funktionsfähiger Beispielcode
<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>