jquery - animate - La transformación del elemento animado gira

transform javascript

Question

¿Cómo rotaría un elemento con un .animate() jQuery? Estoy usando la línea a continuación, que actualmente está animando la opacidad correctamente, pero ¿esto admite CSS3 transforma?

$(element).animate({
   opacity: 0.25,
   MozTransform: ''rotate(-'' + -amount + ''deg)'',
   transform: ''rotate('' + -amount + ''deg)''
});

Answer 1

En mi opinión, jQuery''s animate está un poco exagerado, en comparación con la transition CSS3, que realiza dicha animación en cualquier propiedad 2D o 3D. También me temo que dejarlo en el navegador y olvidarse de la capa llamada JavaScript podría generar un gasto extra de CPU , especialmente cuando deseas utilizar las animaciones. Por lo tanto, me gusta tener animaciones donde están las definiciones de estilo, ya que define la funcionalidad con JavaScript . Cuanta más presentación introduzcas en JavaScript, más problemas enfrentarás más adelante.

Todo lo que tiene que hacer es usar addClass para el elemento que desea animar, donde establece una clase que tiene propiedades de transition CSS. Simplemente "activa" la animación , que se mantiene implementada en la capa de presentación pura .

.js

// with jQuery
$("#element").addClass("Animate");

// without jQuery library
document.getElementById("element").className += "Animate";

Uno podría eliminar fácilmente una clase con jQuery , o eliminar una clase sin biblioteca .

.css

#element{
    color      : white;
}

#element.Animate{
    transition        : .4s linear;
    color             : red;
    /** 
     * Not that ugly as the JavaScript approach.
     * Easy to maintain, the most portable solution.
     */
    -webkit-transform : rotate(90deg);
}

.html

<span id="element">
    Text
</span>

Esta es una solución rápida y conveniente para la mayoría de los casos de uso.

También uso esto cuando quiero implementar un estilo diferente (propiedades de CSS alternativas), y deseo cambiar el estilo sobre la marcha con una animación global de .5s. Agregué una nueva clase al BODY , mientras tenía un CSS alternativo en una forma como esta:

.js

$("BODY").addClass("Alternative");

.css

BODY.Alternative #element{
    color      : blue;
    transition : .5s linear;
}

De esta forma, puede aplicar estilos diferentes con animaciones, sin cargar diferentes archivos CSS. Solo involucras JavaScript para configurar una class .

Answer 2

Me encontré con esta publicación, buscando usar CSS transform en jQuery para una animación infinita de bucle. Este funcionó bien para mí. No sé qué tan profesional es sin embargo.

function progressAnim(e) {
    var ang = 0;

    setInterval(function () {
        ang += 3;
        e.css({''transition'': ''all 0.01s linear'',
        ''transform'': ''rotate('' + ang + ''deg)''});
    }, 10);
}

Ejemplo de uso:

var animated = $(''#elem'');
progressAnim(animated)

Answer 3

Para agregar a las respuestas de Ryley y atonyc, en realidad no tiene que usar una propiedad real de CSS, como text-index o border-spacing , sino que puede especificar una propiedad de CSS falsa, como rotation o my-awesome-property . Podría ser una buena idea usar algo que no corra el riesgo de convertirse en una propiedad real de CSS en el futuro.

Además, alguien preguntó cómo animar otras cosas al mismo tiempo. Esto se puede hacer como de costumbre, pero recuerde que se llama a la función de step para cada propiedad animada, por lo que tendrá que verificar su propiedad, así:

$(''#foo'').animate(
    {
        opacity: 0.5,
        width: "100px",
        height: "100px",
        myRotationProperty: 45
    },
    {
        step: function(now, tween) {
            if (tween.prop === "myRotationProperty") {
                $(this).css(''-webkit-transform'',''rotate(''+now+''deg)'');
                $(this).css(''-moz-transform'',''rotate(''+now+''deg)''); 
                // add Opera, MS etc. variants
                $(this).css(''transform'',''rotate(''+now+''deg)'');  
            }
        }
    });

(Nota: no puedo encontrar la documentación para el objeto "Tween" en la documentación de jQuery; desde step hay un enlace a http://api.jquery.com/Types#Tween que es una sección que no corresponde). Parece que existe. Puede encontrar el código para el prototipo Tween en Github here ).

Answer 4

Por lo que yo sé, los animaciones básicas no pueden animar propiedades de CSS no numéricas.

Creo que se puede hacer esto usando una función de step y la transformación css3 apropiada para el navegador de los usuarios. La transformación CSS3 es un poco complicada para todos tus navegadores (por ejemplo, IE6 necesitas usar el filtro Matrix).

EDITAR : aquí hay un ejemplo que funciona en navegadores webkit (Chrome, Safari): http://jsfiddle.net/ryleyb/ERRmd/

Si quisiera soportar solo IE9, podría usar transform lugar de -webkit-transform , o -moz-transform soportaría Firefox.

El truco utilizado es animar una propiedad CSS que no nos importa ( text-indent ) y luego usar su valor en una función de paso para hacer la rotación:

$(''#foo'').animate(
..
step: function(now,fx) {
  $(this).css(''-webkit-transform'',''rotate(''+now+''deg)''); 
}
...

Answer 5

Solo usa transiciones CSS:

$(element).css( { transition: "transform 0.5s",
                  transform:  "rotate(" + amount + "deg)" } );

setTimeout( function() { $(element).css( { transition: "none" } ) }, 500 );

Como ejemplo, establecí la duración de la animación en 0.5 segundos.

Tenga en cuenta el setTimeout para eliminar la propiedad css de transition finalizada la animación (500 ms)

Para la legibilidad omití los prefijos del vendedor.

Esta solución requiere soporte de transición del navegador fuera del curso.

Answer 6

La respuesta de Ryley es genial, pero tengo texto dentro del elemento. Para rotar el texto junto con todo lo demás, utilicé la propiedad de espacio entre bordes en lugar de texto-sangría.

Además, para aclarar un poco, en el estilo del elemento, establezca su valor inicial:

#foo {
    border-spacing: 0px;
}

Luego, en el fragmento animado, tu valor final:

$(''#foo'').animate({  borderSpacing: -90 }, {
    step: function(now,fx) {
      $(this).css(''transform'',''rotate(''+now+''deg)'');  
    },
    duration:''slow''
},''linear'');

En mi caso, gira 90 grados en sentido antihorario.

Aquí está la demostración en vivo .

Answer 7

//this should allow you to replica an animation effect for any css property, even //properties //that transform animation jQuery plugins do not allow

            function twistMyElem(){
                var ball = $(''#form'');
                document.getElementById(''form'').style.zIndex = 1;
                ball.animate({ zIndex : 360},{
                    step: function(now,fx){
                        ball.css("transform","rotateY(" + now + "deg)");
                    },duration:3000
                }, ''linear'');
            }