generieren @-webkit-keyframes CSS dynamisch mit JavaScript?

Kann ich produzieren

-webkit-animation-name:mymove;

dynamisch mit

object.style.animationName="mymove"

ist es jedoch möglich, etwas erzeugen, wie

@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}

dynamisch mit JS?

Möchten Sie in der Lage sein, verweisen die animation, nachdem Sie definiert ist (in einem anderen element), oder nur für die animation, um das aktuelle element und nennen es beendet?
es jetzt arbeiten, sorry für die Verzögerung!

InformationsquelleAutor nuway | 2013-04-25

Ja, ich nutze Jquery-Bibliothek und dann gilt wie so:

Sagen in dieser situation möchte ich der linken Seite den Wert an, der dynamisch von einem div mit Attribut class mit dem Wert = "push"

<!--HTML-->
<div class="push">Wall</div>

//--JS--
var KeyFrame =
{
 init: function(){
   if(!KeyFrame.check)
   {
     //get the left position
     var pushLeft = $('.push').position().left;
     //set the style and append to head
     var css = $('<style>@keyframes mymove{from {left:0px;}to {left:'+pushLeft+'px;}}</style>').appendTo('head'); //make sure you don't carriage return the css inline statement, or else it'll be error as ILLEGAL
     //so u don't keep appending style to head
     KeyFrame.check = true;
   }
  }
}
KeyFrame.init();

InformationsquelleAutor AFwcxx

3

Betrachten Sie die Idee, wie man den Zugriff auf die styleSheet...
```
document.styleSheets[0].insertRule(animationRule)
```
Es ist sicherlich zu kompliziert sein, um gut zu tun, so kurz, würden Sie beibehalten möchten, eine Verknüpfung und ändern Sie die Regel, die mit jedem Objekt oder etwas, um Unordnung zu vermeiden. Oder Sie könnten versuchen, führen Sie eine form von garbage collection mit Zeitstempel oder etwas, um herauszufinden, wenn die alten entfernt werden kann.

Vom einen schnellen Blick für die anderen links, die ich gefunden...
http://davidwalsh.name/add-rules-stylesheets

deleteRule

http://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/deleteRule

insertRule (addRule vor und ist daher zuverlässiger)

http://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet.insertRule

Hab ich auch erst jetzt bemerkte etwas anderes, das nützlich sein könnte...

http://developer.mozilla.org/en-US/docs/Web/API/CSSKeyframesRule

Eigentlich sieht es aus wie ein besserer cleaner Verständnis oder zumindest eine andere Art und Weise.

http://blog.joelambert.co.uk/2011/09/07/accessing-modifying-css3-animations-with-javascript/

InformationsquelleAutor MistereeDevlord
1

Okay so, wenn ich verstehe Sie richtig jsfiddle sollte den trick tun.

Es verwendet einen vordefinierten Satz von übergangs-Eigenschaften, und ändert die Werte dynamisch über jquery.

Die syntax für die Definition dieser Animationen ist es wie folgt...
```
transition-property: prop1, prop2, prop3;
transition-duration: timing1, timing2, timing3;
transition-timing-function: ease1, ease2, ease3;
```
Indem wir dies tun, können Sie erreichen fast alles können Sie mit @keyframes (nicht ganz alles, aber sicherlich eine ganze Menge), es passiert einfach zu sein gebaut in den Stil des Elementes. Von hier aus können Sie gehen, um zu ändern, was Sie wollen über jquery. Wenn Ihr die Menge zu bewegen, können Sie etwas wie...
```
$("#myElem").css("left", "50px");
```
- und css3-transition kümmert sich um den rest. Wenn es etwas wie die änderung der Leichtigkeit geben, die Sie tun können, dass auch mit...
```
$("#myElem").css("transition-timing-function", "linear");
```
Ich weiß, das ist nicht genau das, was Sie suchen, aber die Chancen sind, wird es den trick tun.
- vielen Dank, aber ich interessiere mich besonders für die Erzeugung der @keyframes Teil
- Ah okay, vielleicht ist diese Antwort kann dann helfen? stackoverflow.com/questions/10342494/...
InformationsquelleAutor Atlas Wegman
0

Sieht es aus, als wenn Sie ein Verständnis von css3-keyframes. Ich empfehle jQuery.Keyframes zu "keyframes erzeugen", Sie können auch fügen Sie Ereignisse und callbacks zu den Animationen.

InformationsquelleAutor Jake Cattrall

Ja, Sie können, wenn Sie schreiben Ihren javascript-code verwenden Sie die setAttribute () - Funktion der vs-Stil (), so dass Sie können mehr als eine Art von Stil. Legen Sie einfach die animation-name, animation-duration, animation-timing-Funktion oder irgendwelche anderen Typen, die Sie wünschen.

<!DOCTYPE html>
<html>
<head>
<title> Welcome </title>
<meta charset = "utf-8">

<style>
@keyframes appear-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }

}

#landing-page {
    width: 100%;
    height: 1000px;
}

</style>

 <script>
     window.addEventListener('load', function(){setTimeout(renderService, 1000)});
     function renderService(){
        var server = document.getElementById('Services');
        server.setAttribute("style", "animation-name: appear-in; animation-duration: 5s; animation-timing-function: ease-in; background-image: url('https://wallpaperaccess.com/full/949819.jpg'); background-size: 80% 100%; background-position: center");
     }

 </script>   

</head>

<body>
<div id = "landing-page">

</div>

</body>
</html>

Dieses geschrieben wird, nur mit regulären javascript-oder vanillaJS, wie Sie es nennen. Ich habe ein Ereignis-listener zu machen, es in einem bestimmten Zeitrahmen machen es zu erscheinen, anstatt nur zu zeigen, ohne jede Kontrolle über Sie.

InformationsquelleAutor darrell

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.