जावास्क्रिप्ट

के साथ वेबकिट-कीफ्रेम से/पैरामीटर पर सेट करें क्या जावास्क्रिप्ट के साथ वेबकिट-कीफ्रेम के from या to को सेट करने का कोई तरीका है?जावास्क्रिप्ट

स्रोत

2010-07-25 Ricardo

मैं भी इस में दिलचस्पी है। मेरा मानना है कि उनका मतलब जावास्क्रिप्ट से एनीमेशन (@ -webkit-keyframes के लिए वेबकिट) को परिभाषित करना है। स्पेक: http://www.w3.org/TR/css3-animations/ –

बस उस स्पेस के नीचे दाईं ओर ध्यान दिया गया है, इसके लिए एक डोम इंटरफ़ेस है, "सीएसएस एनीमेशन सीएसएसओएम के माध्यम से खुलासा हुआ है कीफ्रेम का वर्णन करने वाले नए इंटरफेस की जोड़ी। " क्या किसी को पता है कि यह जावास्क्रिप्ट के माध्यम से कैसे पहुंचा/उपयोग किया जाता है? –

@ एडम-हीथ - डीओएम इंटरफ़ेस का उपयोग करने के उदाहरण के लिए मेरा उत्तर देखें। –

प्रकार का एक समाधान:

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

बस हैडर के लिए एक शैली परिभाषा कहते हैं। यदि संभव हो तो डीओएम हालांकि इसे परिभाषित करने के लिए बहुत साफ/बेहतर होगा।

संपादित करें: वर्ष विधि के साथ क्रोम में त्रुटि

स्रोत

2010-07-26 11:20:26

आप इसके बजाय सीएसएसओएम एपीआई का उपयोग क्यों नहीं करते? –

इसे सुलझाने के लिए मैं एक 'वेबकिट एनीमेशन नाम' मेरी सीएसएस चयनकर्ता के अलग नियम मेरे विकल्प के लिए मेरे उदाहरण में लाल और पीले रंग जोड़ा और फिर बनाया,:

.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; 
    } 
}

तो jQuery का उपयोग कर:

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

स्रोत

2011-06-11 20:56:27

jQuery का उपयोग न करें जहां यह जरूरी नहीं है ... और यही वह मामला है जहां यह नहीं है। DOM स्तरों के नीचे स्पष्ट चरणों के लिए – m93a

तरह से मैं संभाल इस सेट नहीं करने के लिए या तो है या तत्व शैली के लिए मैं सीएसएस फ़ाइल में और befo से छेड़छाड़ कर रहा हूँ एनीमेशन ट्रिगर करने के बाद मैं तत्व शैली निर्धारित करूंगा कि इसे जावास्क्रिप्ट के साथ जाना चाहिए। इस तरह आप गतिशील रूप से प्रबंधित करने के लिए स्वतंत्र हैं कि सामानों को तब तक करना चाहिए जब तक कि हम इसे सीधे जेएस में प्रबंधित नहीं कर सकते। आपको केवल दो में से एक को निर्दिष्ट करने की आवश्यकता है। सेटटाइमआउट एनीमेशन ट्रिगर होने से पहले तत्व को सीएसएस नियम के अनुप्रयोग की अनुमति देता है अन्यथा आपके पास दौड़ की स्थिति होगी और यह एनिमेट नहीं होगा।


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

स्रोत

2011-07-05 19:45:55 mroy

आप सीएसएस डॉम इंटरफ़ेस का उपयोग कर सकते हैं। उदाहरण के लिए:

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

स्रोत

2012-11-16 20:05:53

+1! – cdehaan

यह उदाहरण कई अलग अलग ब्राउज़रों को शामिल किया गया:

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

स्रोत

2014-12-08 02:24:51

उत्तर

संबंधित मुद्दे