Đồng bộ hóa thời gian javascript và css?

Question

Có phải thời gian đồng bộ hóa javascript (thời gian chờ, khoảng thời gian) và css (hoạt ảnh, thời gian trễ) không?

Ví dụ:

#anim1 { 
animation: anim1 10s linear; 
display: none; 
} 

anim1.style.display = "block" ; 
setTimeout(function() { 
anim2.style.webkitAnimation= 'anim2 10s linear'; 
}, 10000); 

sẽ anim2 được chính xác kích hoạt vào cuối anim1? Nó có khác nhau tùy thuộc vào trình duyệt không? Trong trường hợp này, tôi quan tâm nhiều hơn đến việc tập trung vào webkit.

Lưu ý rằng anim1 được kích hoạt qua javascript để tránh tải thời gian không nhất quán.

NB: Đây là câu hỏi lý thuyết, mã trên là minh hoạ và bạn không được sử dụng ở nhà vì có cách thức thích hợp hơn để làm như vậy.

Answer 1

Theo như tôi biết, không có bảo đảm. Tuy nhiên, có những sự kiện mà bạn có thể nghe;

anim1.addEventListener('animationend',function(){ 
    anim2.style.webkitAnimation= 'anim2 10s linear'; 
} 

Lưu ý rằng vì đây là mới, vẫn còn tiền tố của nhà cung cấp bạn cần tính đến; webkitAnimationEnd và oanimationend dành cho Webkit và Opera.

Cũng như câu trả lời ban đầu của tôi (sai) được đề xuất, có transitionend (có tiền tố tương tự) nếu bạn muốn sử dụng chuyển tiếp CSS thay vì hoạt ảnh.

Answer 2

Đây là cách sai để thực hiện việc này. Không có bất kỳ đảm bảo rằng họ sẽ được đồng bộ, mặc dù nó có khả năng họ sẽ được gần gũi.

Sự kiện được cung cấp để bắt đầu, kết thúc lặp lại hoạt ảnh.

http://developer.apple.com/library/safari/#documentation/AudioVideo/Reference/WebKitAnimationEventClassReference/WebKitAnimationEvent/WebKitAnimationEvent.html chi tiết các thông tin này.

Sử dụng mã như:

element.addEventListener("webkitAnimationEnd", callfunction,false); 

liên kết với nó.