web-dev-qa-db-fra.com

Définir les valeurs des images clés Webkit à l'aide de la variable Javascript

J'ai un morceau de code JS pour générer des nombres aléatoires et les produire en tant que variables à utiliser ici à la place des valeurs de rotation

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

Le code ci-dessus fonctionne bien cependant quand j'essaye de coller les variables du javascript dans rotate(variable); je ne peux pas le faire fonctionner. Je suis nouveau dans ce domaine, donc je suis sûr à 90% que je n'ai tout simplement pas la bonne syntaxe pour la variable (sérieusement, je suis horrible à me souvenir si quelque chose a besoin de crochets, de guillemets, de squigglys, etc. et j'ai essayé tout ce à quoi je peux penser) .

Ou cela peut être dû au fait que la variable est locale à la fonction et que CSS ne peut pas lire cela.

Donc, fondamentalement, j'ai juste besoin d'un inconnu pour me dire la syntaxe correcte et comment obtenir CSS pour lire la variable si possible.

Sinon, il semblerait que j'aurai besoin de la fonction pour créer l'intégralité de:

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

... ce qui pourrait être un peu compliqué car la variable aléatoire sera probablement appliquée à plusieurs éléments css.

Oh et actuellement la variable est formatée pour inclure le deg après le nombre, donc ce n'est pas le problème. En fait, par souci de facilité, supposons simplement que j'utilise var dogValue = "20deg"; et oubliez l'élément aléatoire.

Merci.

javascriptcssvariableswebkitkeyframe
33
Sasha

D'accord, pas à quoi ressemble votre code réel, mais vous ne pouvez pas lancer de variables JavaScript en CSS, il ne les reconnaîtra pas.

Au lieu de cela, vous devez créer les règles CSS via JavaScript et les insérer dans le CSSOM (modèle d'objet CSS). Cela peut être fait de plusieurs manières: vous pouvez simplement créer une animation d'images clés et l'ajouter, ou vous pouvez remplacer une animation existante. Pour cette question, je suppose que vous souhaitez continuellement remplacer une animation d'images clés existante avec différentes valeurs de rotation.

J'ai mis en place (et documenté) un JSFiddle pour que vous puissiez jeter un œil à: http://jsfiddle.net/russelluresti/RHhBz/2/

Il commence par exécuter une animation de rotation de -10 -> 10 degrés, mais vous pouvez ensuite cliquer sur le bouton pour lui faire exécuter une rotation entre des valeurs aléatoires (entre -360 et 360 degrés).

Cet exemple a été piraté principalement à partir d'expériences antérieures effectuées par Simon Hausmann. Vous pouvez voir la source ici: http://www.gitorious.org/~simon/qtwebkit/simons-clone/blobs/ceaa977f87947290fa2d063861f90c820417827f/LayoutTests/animations/change-keyframes.html (pour aussi longtemps comme ce lien fonctionne, gitorious est assez mauvais pour maintenir les URL).

J'ai également pris le code de fonction JavaScript randomFromTo d'ici: http://www.admixweb.com/2010/08/24/javascript-tip-get-a-random-number-between-two-integers /

J'ai ajouté de la documentation aux parties du script Simon Hausmann que je lui ai prises (bien que je les ai légèrement modifiées). J'ai également utilisé jQuery pour attacher l'événement click à mon bouton - tous les autres scripts sont écrits en JavaScript natif.

J'ai testé cela pour Chrome 18 et Safari 5.1, et cela semble fonctionner correctement dans les deux navigateurs.

J'espère que cela t'aides.

73
RussellUresti

Dans chrome 49 Et dans Firefox 48, Vous pouvez utiliser la nouvelle API Javascript element.animate() pour insérer vos animations d'images clés.

Veuillez noter que cette API est expérimentale et ne fonctionne pas sur plusieurs navigateurs, à l'exception de ce qui précède.

Des solutions datées comme l'ajout de class ou injection d'images clés pourraient être exploitées pour une compatibilité descendante. Une cale pour le même n'était pas disponible immédiatement.

J'ai donné l'exemple de MDN

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

référer:

7
DDM

Pour tous ceux qui recherchent cette réponse en 2017, voici ce qui a changé dans réponse RussellUresti .

Dans son exemple, cela ne fonctionnera plus:

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

Cela est dû au fait que .insertRule () est un nom non standard. C'est maintenant .appendRule (), donc le code de RusselsUresti sera désormais:

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

Plus d'informations sur CSSKeyframeRule peuvent être trouvées ici

1
connoraworden