Đặt hoạt ảnh chậm trễ trong Safari sẽ ghi đè thuộc tính hoạt ảnh nhưng không phải trong Chrome

Question

Lưu ý, tôi đang sử dụng Safari mới nhất (9.0.2) và Chrome mới nhất. Tôi biết rằng kể từ 9.0.x safari xử lý rất nhiều tiền tố hoạt hình cho bạn. Yay! Ngoài ra, tôi đã gửi báo cáo lỗi.

Tại đó là hầu hết các đơn giản nhất, tôi đang cố gắng để thiết lập các animation-delaychỉ sử dụng JavaScript cho một hình ảnh động CSS Keyframe. Mã này là như sau:

el.style.setProperty("-webkit-animation-delay", "5s", "important"); 

Bây giờ trong Chrome, đây cập nhật animation-delay tài sản như tôi mong đợi chỉ. Thuộc tính animation được giữ nguyên, đó là những gì tôi muốn:

Trong Safari, tuy nhiên, đây ghi đè animation bất động sản, mà vì mục đích của tôi là không ổn:

Rõ ràng đó không phải là giá trị hoạt ảnh hợp lệ. Về cơ bản tôi muốn điều này làm việc trong Safari mà không cần ghi đè thuộc tính animation. Có phương pháp thay thế nào để đạt được điều này không?

Ý tưởng từ phòng CSS/HTML là thêm lớp vào CSS và sau đó chỉ cần chuyển đổi nó với classList.toggle, tuy nhiên thuộc tính chậm trễ hoạt ảnh này sẽ là động và được thay đổi nhiều lần. Các giá trị này KHÔNG được biết trước.

JSFiddle: https://jsfiddle.net/swakq13a/3/

Answer 1

EDIT - Tôi vừa thấy câu hỏi này đã được một tuổi. Câu trả lời này sẽ giúp bất kỳ ai Googling cho vấn đề chính xác này, xin lỗi nếu đó là một năm quá muộn cho bạn, Jimbo.

Tôi đã có thể giải quyết vấn đề trong Safari (đồng thời giữ mọi thứ hoạt động) bằng cách chỉ cần đặt lại toàn bộ thuộc tính hoạt ảnh bằng cách viết tắt. Điều này có thể không lý tưởng 100%, nhưng nó phá vỡ lỗi Safari mà không tạo ra bất kỳ vấn đề động nào mà tôi có thể thấy.

Dưới đây là một ví dụ JS Fiddle hiển thị nó với một giá trị biến: https://jsfiddle.net/andrewborem/5rb5ybe3/1/

LƯU Ý - tôi loại bỏ các "quan trọng" lập luận trên setProperty vì nó không còn cần thiết. Ngoài ra, tôi đã xóa thuộc tính animation-delay khỏi CSS.

setTimeout(function() { 
    var box = document.querySelector('#box'); 
    var variableDelay = "5s"; 
    box.style.setProperty("animation", "cycle-wide 2s " + variableDelay + " ease-in-out infinite both"); 
    alert(box.style.animation); 
}, 1000);