Funkcia jQuery $ .css () nesprávne interpretuje "animáciu-delay" správne (v prehliadačoch webkit!) - jquery, css3, google-chrome, animácia, webkit

Upravené - prepojený nesprávny kódový kód Zdá sa, že sa to deje iba v prehliadačoch webkitov. V prehliadači Firefox to funguje intenzívne. V IE sa pridá správny inline štýl, ale nepridáva predponu (aj keď v JavaScripte namiesto „animation-delay“ uvediem „ms-animation-delay“.

Hrám sa s kodepenom, ktorý sa snaží replikovaťniektoré efekty z materiálu Google (viem, že ich majú v polyméri, chcel som sa len pokúsiť zopakovať niektoré efekty pre zábavu). Z nejakého zvláštneho dôvodu jQuery nesprávne vkladá do animácie štýl „animation: [value]“ namiesto „animation-delay: [value]“. Môže mi niekto vysvetliť, prečo a ako sa obísť?

Tu je kód: odkaz

JS:

$(document).ready(function(){
var lis = $("li"), str;

for(var x=2; x<= lis.length; x++){
str=(0.2+ 0.1*(x-2))+"s";
lis.eq(x-1).css({"animation-delay": str});
}
});

K tomu tiež dochádza s oneskorením prechodu.

odpovede:

Vyzerá to, že FireFox vám umožňuje aktualizovať animáciu pomocou podvlastností, ako napríklad, že môžeme zmeniť oneskorenie animácie iba zmenou vlastnosti animation-delay, Je škoda, že ostatné prehliadače (Chrome, Opera, IE ...) nepodporujú tento spôsob aktualizácie animácie. To znamená zmeniť animáciu, musíte nastaviť animation-name na úplne nové meno (nový názov kľúčového rámca). Takže ak si len chcete zmeniť animation-delay, možno budete musieť vytvoriť 2 kľúčové snímky s rôznymi názvami (mali by však mať rovnaké pravidlá pre vnútorné kľúče, iba rôzne názvy). A potom znovu aplikujte celok animation s novým menom a požadovaným animation-delay ako toto:

//the current animation:
animation: display 5s infinite;
//the updated animation:
animation: display2 5s 1s infinite;

Ako vidíte, rozdiel je v názve (display2 namiesto display) a pridali sme oneskorenie 1s, Takto funguje vo všetkých prehľadávačoch.

Všimol som si však, že chcete iba použiťanimácie pomocou skriptu, takže najjednoduchšie je odstrániť všetku animáciu z kódu CSS (stačí zachovať kľúčové snímky) a použiť animáciu pomocou skriptu, takže nemusíte vytvárať klon (display2) z display keyframes:

$(document).ready(function(){
var lis = $("li"), str;
for(var x=1; x<= lis.length; x++){
str=(200+ 100*(x-1))+"ms";
lis.eq(x-1).css({"animation": "display 5s " + str + " infinite"});
}
});

Aktualizované ukážky.

.attr("style","-webkit-animation-delay:"+str+";animation-delay:"+str);