javascript - texto - transiciones css ejemplos

¿Cómo combinar jQuery animate con las propiedades de css3 sin usar transiciones CSS?

Question

En este ejemplo; Estoy tratando de crear una animación jQuery con la propiedad css3 rotate. Puedo administrar esta animación con css3 transition y jQuery css() pero quiero hacer esto con jQuery animate() para rotar el valor deg de acuerdo con mis jQuery variatons.

¿Es posible usar animación con el valor de propiedad css3 con jQuery 1.8.0?

Aquí está jsFiddle para inspeccionar.

jQuery:

var rotateVal = 90;

//this method isn''t working
$(''.red'').animate({
    ''transform'':''rotate(''+rotateVal+''deg)''
},500);


//this way works but i don''t want to do this with transitions
$(''.black'').css({
    ''transform'':''rotate(''+rotateVal+''deg)'',
    ''transition'':''1s''
});​

html:

<span class="black"></span>
<span class="red"></span>

Editar: se eliminan los prefijos del proveedor, como -webkit- . Gracias a Kevin B.

Answer 1

Kevin es corect, casi. :)

Aquí está trabajando jsFiddle.

No tiene que usar otro elemento y altura, puede hacer algo como:

var red = $(''.red''),
max_rot = 45,
start_from = 90;

red.css({a:0}).animate(
    {''a'':1},
    { step: function(value,tweenEvent)
       {
         rotateVal = start_from + max_rot * value;
         red.css({
           ''transform'':''rotate(''+rotateVal+''deg)'',
         });
       }
     },
1000);​

La ideea es simple. Primero creamos una propiedad ficticia de css ''a'' y la configuramos a 0, y luego la animamos a 1, de modo que la función de paso le dará un valor de 0 a 1 que puede usar para establecer la transformación personalizada.

Answer 2

Un método alternativo sería usar jQuery para cambiar el dom a algo a lo que css respondería.

Podemos configurar nuestro CSS para que se vea así:

.object {
    -webkit-transition:all .4s;
    -moz-transform:all .4s;
    -o-transform:all .4s;
    -ms-transform:all .4s;
    transform:all .4s;
}
.object[data-rotate="false"] {
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    -ms-transform:rotate(0deg);
    transform:rotate(0deg);
}
.object[data-rotate="true"] {
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg);
}

Nuestro jQuery se vería así:

$(''#trigger'').live(''click'',function(){
    if($(''.object'').attr(''data-rotate'') = true) {
        $(''.object'').attr(''data-rotate'',false);
    }
    else {
        $(''.object'').attr(''data-rotate'', true);
    }
});

Obviamente, el navegador tiene que admitir la capacidad de transformar cualquier animación que desee ejecutar, por lo que es impredecible dependiendo del tipo de animación, pero es mejor trabajar si tiene un montón de cosas pasando o si tiene alguna hijos a los que quieres animar al mismo tiempo.

Ejemplo de violín: http://jsfiddle.net/ddhboy/9DHDy/1/

Answer 3

Es posible, pero no es fácil.

var red = $(".red"),
    rotateVal = 90;
$("<div />").animate({
    height: rotateVal
},{
    duration: 500,
    step: function(now){
        red.css(''transform'',''rotate(''+now+''deg)'');
    }
});

Esto básicamente crea una animación falsa de un div separado, luego en cada paso actualiza la rotación del div del objetivo.

Editar: ¡Ups! orden de argumento incorrecto Aquí hay una demostración. http://jsfiddle.net/qZRdZ/

tenga en cuenta que en 1.8.0 no creo que necesite especificar todos los prefijos del proveedor.

Con este método, puede animar casi cualquier cosa siempre que tenga en cuenta que cosas como += y -= no funcionarán correctamente a menos que estén codificadas.

Actualización: Aquí hay una combinación de mi solución y la solución de cuzzea resumida detrás de una función. http://jsfiddle.net/qZRdZ/206/

$.fn.rotate = function(start, end, duration) {
    console.log(this);
    var _this = this;
    var fakeDiv = $("<div />");
    _this.promise().done(function(){
        _this.animate({"a":end},{duration:duration});
        fakeDiv.css("height", start).animate({
            height: end
        }, {
            duration: duration,
            step: function(now) {
                _this.css("transform", "rotate(" + now + "deg)");
            },
            complete: function() {
                fakeDiv.remove();
            }
        });
    });

    return _this;
};

var red = $(''.red'');
red.click(function() {
    if ( !$(this).is('':animated'') ) {

        red.rotate(45,135,500);
        setTimeout(function(){
            red.rotate(135,190,500);
        },750);
        setTimeout(function(){
            red.rotate(190,45,500);
        },1500);
    }
});

});