programación cambiantes valores webkit-transformación en las reglas de animación

Question

i tienen esta hoja de estilo:

 @-webkit-keyframes run { 
      0% { -webkit-transform: translate3d(0px,0px,0px); }    
      100% { -webkit-transform: translate3d(0px,1620px,0px); } 
     } 

no me gustaría modificar el valor de 1620px en función de algunos parámetros. de esta manera:

 @-webkit-keyframes run { 
      0% { -webkit-transform: translate3d(0px,0px,0px); }    
      100% { -webkit-transform: translate3d(0px, height*i, 0px); } 
     } 

yo preferiría ser capaz de utilizar javascript y jQuery, aunque una solución css puro estaría bien.

esto es para un juego de iPhone que se ejecuta en su navegador de safari móvil.

Answer 1

Uso del CSSOM

var style = document.documentElement.appendChild(document.createElement("style")), 
rule = " run {\ 
    0% {\ 
     -webkit-transform: translate3d(0, 0, 0); }\ 
     transform: translate3d(0, 0, 0); }\ 
    }\ 
    100% {\ 
     -webkit-transform: translate3d(0, " + your_value_here + "px, 0);\ 
     transform: translate3d(0, " + your_value_here + "px, 0);\ 
    }\ 
}"; 
if (CSSRule.KEYFRAMES_RULE) { // W3C 
    style.sheet.insertRule("@keyframes" + rule, 0); 
} else if (CSSRule.WEBKIT_KEYFRAMES_RULE) { // WebKit 
    style.sheet.insertRule("@-webkit-keyframes" + rule, 0); 
} 

Si desea modificar una regla de fotogramas clave en una hoja de estilo que ya está incluido, lo siguiente:

var 
     stylesheet = document.styleSheets[0] // replace 0 with the number of the stylesheet that you want to modify 
    , rules = stylesheet.rules 
    , i = rules.length 
    , keyframes 
    , keyframe 
; 

while (i--) { 
    keyframes = rules.item(i); 
    if (
     (
       keyframes.type === keyframes.KEYFRAMES_RULE 
      || keyframes.type === keyframes.WEBKIT_KEYFRAMES_RULE 
     ) 
     && keyframes.name === "run" 
    ) { 
     rules = keyframes.cssRules; 
     i = rules.length; 
     while (i--) { 
      keyframe = rules.item(i); 
      if (
       (
         keyframe.type === keyframe.KEYFRAME_RULE 
        || keyframe.type === keyframe.WEBKIT_KEYFRAME_RULE 
       ) 
       && keyframe.keyText === "100%" 
      ) { 
       keyframe.style.webkitTransform = 
       keyframe.style.transform = 
        "translate3d(0, " + your_value_here + "px, 0)"; 
       break; 
      } 
     } 
     break; 
    } 
} 

Si no se conoce el orden, pero lo hace saber la URL del archivo CSS, reemplace document.styleSheets[0] con document.querySelector("link[href='your-css-url.css']").sheet.

Answer 2

intentar algo como esto:

 
var height = {whatever height setting you want to detect}; 
element.style.webkitTransform = "translate3d(0px," + height*i + ",0px)"; 

Answer 3

No he tenido cuando se quería modificar estos valores (es decir, las variables de uso) pero sin embargo aquí son de 3 a 4 soluciones y 1 solución imposible (por ahora).

• -lado del servidor cálculo: con el fin de servir a un CSS diferente de vez en cuando, se puede decir PHP o cualquier lenguaje de servidor para analizar .css archivos, así como .php o .html y luego usar PHP variables entre etiquetas PHP. Cuidado con el almacenamiento en caché de archivos:? Evitarlo, puede cargar una hoja de estilo style.css como 1234567890random-o-tiempo que se va a producir un archivo de manifiesto diferente y por lo tanto no será almacenado en caché

• SASS es también un servidor -side solución que necesita Ruby y le proporcionará una sintaxis existente, probablemente más limpio que una solución hecha a mano como otros ya tienen acerca de los problemas y soluciones

• LESS es una solución de cliente que va a cargar su .less archivo y un archivo less.js que analizará el primero y le proporcionará variables en CSS sea cual sea su servidor. También puede funcionar en el servidor con Node.js

• CSS siendo dinámicamente modificado mientras se visualiza la página?
  Para 2D hay jquery-animate-enhanced de Ben Barnett, 2d-transform o CSS3 rotate son lanzados al revés (usan CSS3 siempre que es posible y donde no existen tales funciones, recurren a jQuery .animate() existente y filtro de matriz IE) pero eso es eso.
  Usted podría create a plugin for jQuery que manejar con unos parámetros de lo que quiere lograr con Transformación 3D y evitar la molestia de modificar las reglas CSS largas y complejas en el DOM

• CSS solamente: se podría utilizar -moz- Calc [1] [2] que sólo funciona en Firefox 4.0 con

Answer 4

Una solución -webkit-transform que funciona sólo en OK ... No importa :-) 'Chunky'?

Crea transformaciones para las alturas dentro de la granularidad elegida, por ejemplo 0-99, 100-199, 200-299, etc.Cada uno con un identificador de nombre único, como la animación:

@-webkit-keyframes run100 { 
     0% { -webkit-transform: translate3d(0px,0px,0px); }    
     100% { -webkit-transform: translate3d(0px,100px,0px); } 
} 

@-webkit-keyframes run200 { 
     0% { -webkit-transform: translate3d(0px,0px,0px); }    
     100% { -webkit-transform: translate3d(0px,200px,0px); } 
} 

continuación, crear clases CSS a juego:

.height-100 div { 
    -webkit-animation-name: run100; 
} 

.height-200 div { 
    -webkit-animation-name: run200; 
} 

luego con javascript decidir qué porción que está y asignar la clase correspondiente al elemento circundante.

$('#frame').attr('class', '').addClass('height-100'); 

¡Estaría bien si la granularidad no es demasiado fina!

Answer 5

Ha intentado declarar la parte del fotograma clave de su CSS en un elemento <style> en el encabezado de su documento html. A continuación, puede darle a este elemento una identificación o lo que sea y cambiar su contenido siempre que lo desee con javaScript. Algo como esto:

<style id="keyframes"> 
     @-webkit-keyframes run { 
      0% { -webkit-transform: translate3d(0px,0px,0px); }    
      100% { -webkit-transform: translate3d(0px, 1620px, 0px); } 
     } 
</style> 

Luego, su jQuery puede cambiar esto como algo normal:

$('#keyframes').text('whatever new values you want in here'); 

Answer 6

bien de su ejemplo me parece que las animaciones CSS pueden ser excesivos. Usar transiciones en su lugar:

-webkit-transition: -webkit-transform .4s linear; /* you could also use 'all' instead of '-webkit-transform' */ 

y luego aplicar una nueva transformación para el elemento a través de JS:

$("<yournode>")[0].webkitTransform = "translate3d(0px,"+ (height*i) +"px,0px)"; 

Se debe animar a eso.

Answer 7

Usé la solución de Warmanp y funcionó, pero con un poco de ajustes muy importantes.

$('#ticket-marquee-css').text(
    "@-webkit-keyframes marqueeR{ 0%{text-indent: -" + distanceToMove + "px;} 100%{text-indent: 0;} }" + 
    "@-webkit-keyframes marqueeL{ 0%{text-indent: 0;} 100%{text-indent: -" + distanceToMove + "px;} }" 
); 

Con el fin de conseguir la transición CSS para actualizar, en lugar de utilizar los valores previamente definidos, que tenía que hacer la parada de animación, a continuación, reinicie. Para ello, coloqué una clase de "activa" en los elementos, e hizo que el CSS sólo se aplica la transición a los elementos que tenía esa clase

#marquee1.active {-webkit-animation-name: marqueeL;} 
#marquee2.active {-webkit-animation-name: marqueeR;} 

Entonces sólo tenía que cambiar la clase "activa" off , espere a que se aplique en el DOM (de ahí el setTimeout), luego vuelva a aplicarlo.

$('.ticket-marquee').removeClass('active'); 
setTimeout(function() { $('.ticket-marquee').addClass('active'); },1); 

Y eso funciona genial! ¡Ahora puedo cambiar dinámicamente la distancia que mueve el texto!