JavaScript ile webkit anahtar karelerini/parametresinden ayarlayın

JavaScript ile webkit anahtar karesinin from veya to ayarlanmasını sağlayan bir yol var mı?JavaScript ile webkit anahtar karelerini/parametresinden ayarlayın

kaynak

2010-07-25 Ricardo

Ben de bu ilgileniyorum. Javascript'ten (webkit için @ -webkit-anahtar kareleri) animasyonu tanımlayacağına inanıyorum. Spec: http://www.w3.org/TR/css3-animations/ –

Bu özelliğin altında aşağı doğru fark edildiğinde, "CSS animasyonu CSSOM'a anahtar karelerini açıklayan yeni arayüzler çifti. " Bunun Javascript ile nasıl erişileceğini/kullanıldığını bilen var mı? –

@ adam-heath - DOM arayüzünü kullanma örneği için cevabımı inceleyin. –

Bir çeşit çözüm:

var cssAnimation = document.createElement('style'); 
cssAnimation.type = 'text/css'; 
var rules = document.createTextNode('@-webkit-keyframes slider {'+ 
'from { left:100px; }'+ 
'80% { left:150px; }'+ 
'90% { left:160px; }'+ 
'to { left:150px; }'+ 
'}'); 
cssAnimation.appendChild(rules); 
document.getElementsByTagName("head")[0].appendChild(cssAnimation);

Sadece başlığına bir stil tanımını ekler. Mümkünse DOM'yi tanımlamak için çok daha temiz/daha iyi olurdu.

Düzenleme: eski yöntemle Chrome'da Hata

kaynak

2010-07-26 11:20:26

Neden bunun yerine CSSOM API'sini kullanmıyorsunuz? –

Bunu çözmek için benim örnekte, benim seçenekleri için kırmızı ve sarı renklendirme ayrı kural benim CSS seçicisi bir 'webkit animasyon adını' eklendi ve sonra oluşturuldu:

jQuery kullanarak Sonra

.spinner { 
-webkit-animation-name: spinnerColorRed; 
} 

@-webkit-keyframes spinnerColorRed { 
    from { 
    background-color: Black; 
    } 
    to { 
    background-color: Red; 
    } 
} 

@-webkit-keyframes spinnerColorYellow { 
    from { 
    background-color: Black; 
    } 
    to { 
    background-color: Yellow; 
    } 
}

$("#link").click(function(event) { 
    event.preventDefault(); 
    $(".spinner").css("-webkit-animation-name", "spinnerColorYellow"); 
});

kaynak

2011-06-11 20:56:27

JQuery'yi gerekli olmadığı yerlerde kullanmayın ... Ve bunun olmadığı durum budur. DOM seviyelerini temizlemek için – m93a

Sanırım bu da set getirmemektir işlemek Öyle ya eleman tarzı için ben css dosyasında ve befo manipüle ediyorum dan Animasyonu tetiklerken javascript ile gitmesi gereken öğe stilini ayarlayacağım. Bu şekilde, js'de bunu doğrudan yönetebilmemiz için hangi şeylerin ne yapması gerektiğini dinamik olarak yönetebilirsiniz. Sadece ikisinden birini belirtmeniz gerekiyor. SetTimeout, canlandırma tetiklenmeden önce css kuralının öğeye uygulanmasına izin verir, aksi takdirde bir yarış durumunuz olur ve animasyon olmaz.


#someDiv.slideIn { 
    -webkit-animation: slideIn 0.5s ease; 
} 

@-webkit-keyframes slideIn { 
    0% { 
     left:0px; 
    } 

    100% {} 
} 


var someDiv = document.getElementById('someDiv'); 
someDiv.style.left = '-50px'; 
setTimeout(function(){ 
    someDiv.addClass('slideIn'); 
},0);

kaynak

2011-07-05 19:45:55 mroy

Sen CSS DOM arayüzünü kullanabilirsiniz. Örneğin:

<html> 
    <body> 
     <style> 
     @keyframes fadeout { 
      from { opacity:1; } 
      to { opacity:0; } 
     } 
     </style> 
     <script text="javascript"> 
      var stylesheet = document.styleSheets[0]; 
      var fadeOutRule = stylesheet.cssRules[0]; 
      alert(fadeOutRule.name); // alerts "fadeout" 

      var fadeOutRule_From = fadeOutRule.cssRules[0]; 
      var fadeOutRule_To = fadeOutRule.cssRules[1]; 
      alert(fadeOutRule_From.keyText); // alerts "0%" (and not "from" as you might expect) 
      alert(fadeOutRule_To.keyText); // alerts "100%" 

      var fadeOutRule_To_Style = fadeOutRule_To.style; 

      alert(fadeOutRule_To_Style.cssText); // alerts "opacity:0;" 

      fadeOutRule_To_Style.setProperty('color', 'red'); // add the style color:red 
      fadeOutRule_To_Style.removeProperty('opacity'); // remove the style opacity 

      alert(fadeOutRule_To_Style.cssText); // alerts "color:red;" 
     </script> 
    </body> 
</html>

kaynak

2012-11-16 20:05:53

+1! – cdehaan

Bu örnekte birkaç farklı tarayıcılar kapsar:

var keyFramePrefixes = ["-webkit-", "-o-", "-moz-", ""]; 
var keyFrames = []; 
var textNode = null; 

for (var i in keyFramePrefixes){ 

keyFrames = '@'+keyFramePrefixes[i]+'keyframes cloudsMove {'+ 
'from {'+keyFramePrefixes[i]+'transform: translate(0px,0px);}'+ 
'to {'+keyFramePrefixes[i]+'transform: translate(1440px' 
'px,0px);}}'; 

textNode = document.createTextNode(keyFrames); 
document.getElementsByTagName("style")[0].appendChild(textNode); 
}

kaynak

2014-12-08 02:24:51

JavaScript ile webkit anahtar karelerini/parametresinden ayarlayın

cevap

İlgili konular