Ustaw webkit-klatki kluczowe od/do parametru z JavaScriptem

Czy istnieje sposób ustawienia from lub to klatki kluczowej webkita za pomocą JavaScript?Ustaw webkit-klatki kluczowe od/do parametru z JavaScriptem

Źródło

2010-07-25 Ricardo

Jestem również zainteresowany w tym. Uważam, że ma na celu zdefiniowanie animacji (@ -webkit-keyframes dla webkita) z Javascript. Spec: http://www.w3.org/TR/css3-animations/ –

Właśnie zauważyłem na dole tej specyfikacji, jest tam interfejs DOM, cytowany jako "animacja CSS jest wystawiona na CSSOM przez parę nowych interfejsów opisujących klatki kluczowe. " Czy ktoś wie, jak to jest dostępne/używane przez JavaScript? –

@ adam-heath - zobacz moją odpowiedź na przykład korzystania z interfejsu DOM. –

Roztwór rodzaju:

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

tylko dodaje definicję stylu na cel. Byłoby znacznie czystsze/lepiej zdefiniować go chociaż DOM, jeśli to możliwe.

Edit: błąd w Chrome metodą starego

Źródło

2010-07-26 11:20:26

Dlaczego zamiast tego nie używasz CSSOM API? –

Aby rozwiązać ten problem dodałem „WebKit nazwę animacji” do mojego selektor CSS, a następnie tworzone odrębne zasady moich opcji, w moim przykładzie czerwone i żółte zabarwienie:

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

Następnie przy użyciu jQuery:

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

Źródło

2011-06-11 20:56:27

Nie używaj jQuery tam, gdzie nie jest to konieczne ... I tak jest w przypadku, gdy tak nie jest. – m93a

The way i obsłużyć to nie jest ustawione albo z lub do stylu elementu ja manipulacji w pliku css i befo Ponownie uruchamiając animację, ustawię styl elementu, do którego ma przejść javascript. W ten sposób możesz dynamicznie zarządzać, co należy zrobić, abyśmy mogli zarządzać tym bezpośrednio w js. Musisz tylko określić jeden z dwóch. Funkcja setTimeout pozwala na zastosowanie reguły css do elementu przed uruchomieniem animacji, w przeciwnym razie wystąpiłby stan wyścigu i nie byłby on animowany.


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

Źródło

2011-07-05 19:45:55 mroy

Można użyć interfejsu CSS DOM. Na przykład:

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

Źródło

2012-11-16 20:05:53

+1 dla wyraźnych kroków w dół poziomów DOM! – cdehaan

Przykład ten obejmuje kilka różnych przeglądarek:

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

Źródło

2014-12-08 02:24:51

Ustaw webkit-klatki kluczowe od/do parametru z JavaScriptem

Odpowiedz

Powiązane problemy