22 votos

cambiar mediante programación valores de webkit-transformación en las reglas de la animación

tengo esta hoja de estilo:

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

no quisiera modificar el valor de 1620px dependiendo de algunos parámetros. Así:

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

preferiría poder usar javascript y jquery, aunque sería aceptable una solución css puro.

se trata de un juego de iphone que se ejecuta en su navegador safari mobile.

34voto

Eli Grey Puntos 17553

Uso el 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 ha incluido, haga 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 sabes el orden pero saber la URL del archivo CSS, reemplace document.styleSheets[0] con document.querySelector("link[href=' your-css-url.css ']").sheet .

7voto

warmanp Puntos 307

Han intentado declarar la parte de fotograma clave de la css en un <style> elemento en el head del documento html. Luego puede dar a este elemento un id o lo que sea y cambiar su contenido cuando quieras 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>

Entonces su jquery cambiar esto como normal:

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

3voto

Tokimon Puntos 1380

Bien por tu ejemplo me parece que las animaciones CSS pueden ser excesiva. Utilizar las transiciones:

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

y luego aplicar una nueva transformación al elemento a través de js:

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

Debe animar a.

2voto

FelipeAls Puntos 10010

Yo no se cuando se quiere modificar estos valores (es decir, el uso de variables) pero sin embargo aquí son de 3 a 4 soluciones y el 1 de imposible solución (por ahora).

  • en el lado del servidor de cálculo: con el fin de servir a un CSS diferente de vez en cuando, usted puede decirle a PHP o cualquier lenguaje en el servidor para analizar .css así como archivos de .php o .html y, a continuación, utilizar variables de PHP en-entre las etiquetas PHP. Tenga cuidado de almacenamiento en caché de archivos: para evitar esto, usted puede cargar una hoja de estilo como estilo.css?1234567890random-o-el tiempo se va a producir una aparente archivo diferente y por lo tanto no será almacenado en caché

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

  • MENOS es una solución de cliente que va a cargar tu .menos de archivo y un less.js archivo que se va a analizar la antigua y proporcionar variables en CSS cualquiera que sea su servidor. También puede trabajar en el lado del servidor con node.js

  • CSS ser modificado dinámicamente , mientras que su página se muestra?
    Para 2D hay jquery-animar mejorada de Ben Barnett, 2d-transformar o CSS3 girar se asentaron alrededor de la otra forma (que utiliza CSS3 donde sea posible y donde no hay ninguna de estas funciones, se reserva existente jQuery .animate() de IE y la matriz de filtro), pero eso es todo.
    Usted podría crear un plugin para jQuery que se encargaría de gestionar con unos parámetros de lo que se quiere lograr con la Transformación 3D y evitar la molestia de modificar largo y complejo de reglas CSS en el DOM

  • CSS sólo: usted puede usar-moz-calc [1][2] que sólo funciona en Firefox 4.0 con -webkit-transform que sólo funciona en ... OK no importa :-)

1voto

probbins222 Puntos 79

Pruebe algo como esto:

var altura = {cualquier altura ajuste desea detectar};
element.style.webkitTransform = "translate3d(0px," + altura * i + ", 0px)";

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X