Valori Set Webkit Fotogrammi chiave utilizzando JavaScript variabile

Question

Ho un pezzo di codice JS per generare i numeri e le loro uscita casuali come variabili da utilizzare qui al posto della rotazione valori

@-webkit-keyframes rotate { 
    0% {-webkit-transform: rotate(-10deg);} 
    100% {-webkit-transform: rotate(10deg);} 
} 

#dog{ 
/*irrelevant settings*/ 
-webkit-animation: rotate 5s infinite alternate ease-in-out; 
} 

Il codice sopra funziona bene ma quando Provo ad attaccare le variabili dal javascript in rotate(variable); Non riesco a farlo funzionare. Sono nuovo di questo quindi sono sicuro al 90% che non ho la sintassi giusta per la variabile (seriamente sono terribile nel ricordare se qualcosa ha bisogno di parentesi, citazioni, squiggly ecc. E ho provato tutto quello che riesco a pensare) .

Oppure potrebbe essere perché la variabile è locale alla funzione e CSS non può leggere questo.

Quindi, in pratica ho solo bisogno di un qualche tipo sconosciuto di dirmi la sintassi corretta e su come ottenere i CSS per leggere la variabile, se possibile.

Altrimenti sembra che mi servirà la funzione di creare la totalità di:

@-webkit-keyframes rotate { 
    0% {-webkit-transform: rotate(-10deg);} 
    100% {-webkit-transform: rotate(10deg);} 
} 

... che potrebbe essere un po 'confuso in quanto la variabile casuale sarà probabilmente essere applicata a più elementi CSS.

Oh, e attualmente la variabile è formattato per includere il deg dopo il numero in modo che non è il problema. Infatti, per semplicità, suppongo di utilizzare var dogValue = "20deg"; e dimentica l'elemento casuale.

Grazie.

Answer 1

D'accordo, non è ciò che il codice vero e assomiglia, ma non si può buttare variabili JavaScript in CSS, esso non li riconosce.

Invece, è necessario creare le regole CSS attraverso JavaScript e inserirli nel CSSOM (Object Model CSS). Questo può essere fatto in diversi modi: puoi semplicemente creare un'animazione di fotogrammi chiave e aggiungerla, oppure puoi sovrascrivere un'animazione esistente. Per questa domanda, presumo che vogliate sovrascrivere continuamente un'animazione di fotogrammi chiave esistente con valori di rotazione diversi.

ho messo insieme (e documentato) un JSFiddle per voi di dare un'occhiata a: http://jsfiddle.net/russelluresti/RHhBz/2/

Si inizia l'esecuzione di un -10 - Animazione di rotazione> 10 gradi, ma poi è possibile fare clic sul pulsante per farlo eseguire una rotazione tra valori casuali (tra -360 e 360 ​​gradi).

Questo esempio è stato messo insieme in primo luogo da prima sperimentazione fatta da Simon Hausmann. Puoi vedere la fonte qui: http://www.gitorious.org/~simon/qtwebkit/simons-clone/blobs/ceaa977f87947290fa2d063861f90c820417827f/LayoutTests/animations/change-keyframes.html (per tutto il tempo in cui quel link funziona, gitorious è piuttosto brutto a mantenere gli URL).

Ho anche preso il codice di funzione randomFromTo JavaScript da qui: http://www.admixweb.com/2010/08/24/javascript-tip-get-a-random-number-between-two-integers/

ho aggiunto la documentazione per le parti dello script Simon Hausmann che ho preso da lui (anche se ho un po 'modificato loro). Ho anche usato jQuery solo per allegare l'evento click al mio pulsante - tutti gli altri script sono scritti in JavaScript nativo.

Ho provato questo per Chrome 18 e Safari 5.1, e sembra funzionare bene in entrambi i browser.

Spero che questo aiuti.

Answer 2

In chrome 49 in poi e Firefox 48 in poi è possibile sfruttare la nuova API Javascript element.animate() a spingere nelle animazioni dei fotogrammi chiave.

Si informa che questa API è sperimentale e non funziona su browser diversi dai precedenti.

Le soluzioni datate come l'aggiunta di class o injecting keyframes potrebbero essere sfruttate per compatibilità con le versioni precedenti. Uno spessore per lo stesso non era disponibile immediatamente.

uno strattone l'esempio MDN

document.getElementById("tunnel").animate([ 
    // keyframes 
    { transform: 'translateY(0px)' }, 
    { transform: 'translateY(-300px)' } 
], { 
    // timing options 
    duration: 1000, 
    iterations: Infinity 
}); 

riferiscono:

• caniuse.com/#feat=web-animation
• MDN documentation

Answer 3

Per tutti coloro che è alla ricerca di questa risposta nel 2017 ecco cosa è cambiato in RussellUresti answer.

Nel suo esempio, questo non funziona più:

keyframes.insertRule("0% { -webkit-transform: rotate(" + randomFromTo(-360,360) + "deg); }"); 
keyframes.insertRule("100% { -webkit-transform: rotate(" + randomFromTo(-360,360) + "deg); }"); 

Ciò è dovuto al .insertRule() essendo un nome non standard. Ora è .appendRule(), quindi il codice di RusselsUresti sarà ora:

keyframes.appendRule("0% { -webkit-transform: rotate(" + randomFromTo(-360,360) + "deg); }"); 
keyframes.appendRule("100% { -webkit-transform: rotate(" + randomFromTo(-360,360) + "deg); }"); 

More information on the CSSKeyframeRule can be found here