Safari'de animasyon gecikme ayarı animasyon özelliği üzerine yazıyor, ancak Chrome'da değil

Question

Not En son Safari'yi (9.0.2) ve en yeni Chrome'u kullanıyorum. 9.0.x safari'den itibaren, sizin için çok daha fazla animasyon önekini kullandığını biliyorum. Yuppi! Ayrıca, bir hata raporu gönderdim. en kolay yol At

, bir CSS Ana Kare animasyon için JavaScript kullanarak animation-delaysadece ayarlamak çalışıyorum. Ben sadece beklediğiniz gibi

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

Şimdi Chrome'da bu animation-delay özelliğini günceller şöyledir: kodudur.

:

Safari'de

Ancak bu benim amaçlar için iyi değil animation özelliğini, üzerine yazar: animation özelliği ne istiyorum ki, dokunulmaz Açıkçası bu geçerli bir animasyon değeri bile değil. Bu temelde, animation özelliğini geçersiz kılmadan Safari'de çalışmayı istiyorum. Bunu başarmak için alternatif bir yöntem var mı?

CSS/HTML odasından gelen fikir, sınıfı CSS'ye eklemek ve ardından classList.toggle ile değiştirmek, ancak bu animasyon gecikme özelliği dinamik olacak ve tekrar tekrar değiştirilecektir. Bu değerler önceden bilinmemektedir.

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

Answer 1

DÜZENLEME - Sadece bu soru bir yaşında olduğunu gördü. Bu cevap, herhangi bir kimsenin bu konuda sorun yaratmasına yardımcı olmalı, eğer bir yıl geçse özür dileriz, Jimbo.

Tüm animasyon özelliğini kısayolla sıfırlayarak sorunu Safari'de çözdüm (her şeyi işlevsel tutarken). Bu% 100 ideal olmayabilir, ancak görebileceğim herhangi bir animasyon sorunu yaratmadan Safari hatasını atlatır. İşte

bir değişken değeri ile gösteren bir örnek JS Fiddle geçerli: https://jsfiddle.net/andrewborem/5rb5ybe3/1/

NOT - bu artık gerekli değildir çünkü setProperty üzerinde "önemli" argüman kaldırıldı. Ayrıca, animation-delay özelliğini CSS'den kaldırdım.

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);