variable - javascript descargar
Establecer valores de fotogramas clave de Webkit mediante la variable Javascript (3)
Tengo un fragmento de código JS para generar números aleatorios y darlos como variables para usar aquí en lugar de los valores de rotación
@-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;
}
El código anterior funciona bien, sin embargo, cuando trato de pegar las variables desde el javascript en rotate(variable); No puedo hacer que funcione. Soy nuevo en esto, así que estoy 90% seguro de que no tengo la sintaxis correcta para la variable (en serio, soy terrible para recordar si algo necesita corchetes, comillas, squigglys, etc. y he intentado todo lo que puedo pensar) .
O podría ser porque la variable es local para la función y CSS no puede leer eso.
Básicamente, solo necesito que algún tipo extraño me diga la sintaxis correcta y cómo hacer que CSS lea la variable si es posible.
De lo contrario, parece que necesitaré la función para crear la totalidad de:
@-webkit-keyframes rotate {
0% {-webkit-transform: rotate(-10deg);}
100% {-webkit-transform: rotate(10deg);}
}
... que podría ser un poco desordenado ya que la variable aleatoria probablemente se aplicará a múltiples elementos css.
Ah, y actualmente la variable está formateada para incluir el deg después del número, por lo que ese no es el problema. De hecho, en aras de la comodidad, asuma que estoy usando var dogValue = "20deg"; y olvida el elemento aleatorio.
Gracias.
De acuerdo, no como es tu código real, pero no puedes arrojar variables de JavaScript en CSS, no las reconocerá.
En su lugar, debe crear las reglas de CSS a través de JavaScript e insertarlas en CSSOM (Modelo de objetos CSS). Esto se puede hacer de varias maneras: puede crear una animación de fotograma clave y agregarla, o puede sobrescribir una animación existente. Por este motivo, supongo que desea sobrescribir continuamente una animación de fotograma clave existente con diferentes valores de rotación.
He reunido (y documentado) un JSFiddle para que le eches un vistazo a: http://jsfiddle.net/russelluresti/RHhBz/2/
Comienza ejecutando una animación de rotación de -10 -> 10 grados, pero luego puede hacer clic en el botón para que ejecute una rotación entre valores aleatorios (entre -360 y 360 grados).
Este ejemplo fue pirateado principalmente a partir de experimentos anteriores realizados por Simon Hausmann. Puede ver la fuente aquí: http://www.gitorious.org/~simon/qtwebkit/simons-clone/blobs/ceaa977f87947290fa2d063861f90c820417827f/LayoutTests/animations/change-keyframes.html (durante el tiempo que ese enlace funcione, gitorious es bastante malo para mantener las URL).
También tomé el código de la función randomFromTo desde aquí: http://www.admixweb.com/2010/08/24/javascript-tip-get-a-random-number-between-two-integers/
Agregué documentación a las partes del guión de Simon Hausmann que le he quitado (aunque las he modificado ligeramente). También utilicé jQuery solo para adjuntar el evento click a mi botón, todos los demás guiones están escritos en JavaScript nativo.
He probado esto para Chrome 18 y Safari 5.1, y parece funcionar bien en ambos navegadores.
Espero que esto ayude.
En chrome 49 y Firefox 48 adelante, puede aprovechar el nuevo elemento de API de Javascript.animate element.animate() para insertar sus animaciones de fotograma clave.
Tenga en cuenta que esta API es experimental y no funciona en todos los navegadores excepto en los casos mencionados anteriormente.
Las soluciones anticuadas como la adición de class o la inyección de fotogramas clave podrían aprovecharse para compatibilidad con versiones anteriores. Una calza para el mismo no estaba disponible inmediatamente.
Yanked el ejemplo de MDN
document.getElementById("tunnel").animate([
// keyframes
{ transform: ''translateY(0px)'' },
{ transform: ''translateY(-300px)'' }
], {
// timing options
duration: 1000,
iterations: Infinity
});
referir:
Para cualquiera que esté buscando esta respuesta en 2017, aquí está lo que ha cambiado en la respuesta de RussellUresti .
En su ejemplo, esto ya no funcionará:
keyframes.insertRule("0% { -webkit-transform: rotate(" + randomFromTo(-360,360) + "deg); }");
keyframes.insertRule("100% { -webkit-transform: rotate(" + randomFromTo(-360,360) + "deg); }");
Esto se debe a que .insertRule () es un nombre no estándar. Ahora es .appendRule (), por lo que el código de RusselsUresti ahora será:
keyframes.appendRule("0% { -webkit-transform: rotate(" + randomFromTo(-360,360) + "deg); }");
keyframes.appendRule("100% { -webkit-transform: rotate(" + randomFromTo(-360,360) + "deg); }");