Tôi đang cố gắng animate yếu tố html được tạo động với Chuyển đổi CSS3.Chuyển tiếp CSS3 thành các phần tử được tạo động
Tôi muốn hoạt ảnh bắt đầu ngay trước khi phần tử được tạo.
Đối với những i tạo ra một lớp chính xác đến vị trí ban đầu của nguyên tố này và sau đó tôi thiết lập các vị trí mục tiêu của jquery css() phương pháp
Nhưng các yếu tố mới nó chỉ apears ở vị trí mục tiêu mà không bất kỳ chuyển tiếp .
Nếu tôi sử dụng setTimeout 0ms để đặt giá trị css mới hoạt động.
Có điều gì đó tôi đang làm sai? hoặc là một giới hạn? Tôi không nghĩ mình nên sử dụng giải pháp setTimeout.
Cảm ơn!
CẬP NHẬT: Đây là liên kết có mã chạy trên jsfiddle.net để bạn thử nghiệm. http://jsfiddle.net/blackjid/s9zSH/
CẬP NHẬT Tôi đã cập nhật ví dụ với giải pháp trong câu trả lời.
http://jsfiddle.net/s9zSH/52/
Dưới đây là một ví dụ mã làm việc đầy đủ
<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>
phụ lục: trong khi bạn không phải sử dụng thời gian chờ, đôi khi có thể tốt. nó thực sự phụ thuộc vào ứng dụng của bạn. buộc tính toán lại đồng bộ các kiểu, nếu được thực hiện thường xuyên, có thể làm cho giao diện người dùng của bạn bị giật. nếu bạn thấy điều đó xảy ra, hãy sử dụng hết thời gian chờ để chia nhỏ/phân bổ một hoạt ảnh phức tạp qua một vài khung hình. – mmaclaurin
Cảm ơn bạn, đây là lời giải thích đầu tiên tôi đã tìm thấy * tại sao * một setTimeout có hiệu quả cho việc buộc chuyển tiếp CSS. –
Thật tuyệt vời! Bạn đã cứu ngày của tôi. Lãng phí khá nhiều thời gian để tìm ra lý do, cuối cùng bạn đã giải quyết nó. cảm ơn một lần nữa! –