CSS3 переходы к динамически создаваемым элементам
Я пытаюсьоживлять динамически создаваемый HTML-элемент сCSS3 переходы.
Я хочу, чтобы анимация запускалась непосредственно перед созданием элемента.
Для этого я создаю класс, который устанавливает исходную позицию элемента, а затем я устанавливаю целевую позицию с помощью jqueryCSS () метод
Но новый элемент просто появляется в целевой позиции без какого-либо перехода.
Если я использую setTimeout 0 мс, чтобы установить новое значение CSS, это работает.
Есть что-то, что я делаю не так? или это ограничение? Я не думаю, что мне нужно использовать обходной путь setTimeout.
Спасибо!
ОБНОВИТЬВот ссылка с кодом, запущенным на 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>