Animar una transformación CSS con jQuery

Question

Estoy tratando de animar un div, y hacer que gire sobre el eje y 180 grados. Cuando llamo el siguiente código me sale un error jQuery:

$("#my_div").animate({ 
     "transform": "rotateY(180deg)", 
     "-webkit-transform": "rotateY(180deg)", 
     "-moz-transform": "rotateY(180deg)" 
    }, 500, function() { 
     // Callback stuff here 
    }); 
}); 

Dice "TypeError no detectada: No se puede leer la propiedad 'defaultView' de la indefinida" y dice que es en el jQuery presentar en sí ... ¿qué estoy haciendo mal ?

Answer 1

Prueba esto:

$('#myDiv').animate({ textIndent: 0 }, { 
    step: function(go) { 
     $(this).css('-moz-transform','rotate('+go+'deg)'); 
     $(this).css('-webkit-transform','rotate('+go+'deg)'); 
     $(this).css('-o-transform','rotate('+go+'deg)'); 
     $(this).css('transform','rotate('+go+'deg)'); 
    }, 
    duration: 500, 
    complete: function(){ alert('done') } 
}); 

http://jsfiddle.net/RPSzb/2/

Answer 2

También puede predefinir la rotación en una clase CSS y utilizar jQuery para añadir/eliminar la clase:

CSS:

#my_div { 
    -moz-transition: all 500ms ease; 
    -o-transition: all 500ms ease; 
    -webkit-transition: all 500ms ease; 
    transition: all 500ms ease; 
} 
.rotate { 
    -moz-transform: rotate(180deg); 
    -o-transform: rotate(180deg); 
    -webkit-transform: rotate(180deg); 
    transform: rotate(180deg); 
} 

jQuery:

$("#my_div").addClass('rotate'); 

Answer 3

jQuery no puede animar propiedades de transformación de la caja. Pero se pueden animar las propiedades personalizadas con .animate() y hacer la transformación "manualmente" con el step function:

var $myDiv = $("#my_div"), 
    ccCustomPropName = $.camelCase('custom-animation-degree'); 
$myDiv[0][ccCustomPropName ] = 0; // Set starting value 
$myDiv.animate({ccCustomPropName : 180}, 
    { 
     duration: 500, 
     step: function(value, fx) { 
      if (fx.prop === ccCustomPropName) { 
       $myDiv.css('transform', 'rotateY('+value+'deg)'); 
       // jQuery will add vendor prefixes for us 
      } 
     }, 
     complete: function() { 
      // Callback stuff here 
     } 
    }); 

Ver this fiddle para un ejemplo de trabajo (haga clic en el cuadro de color azul).

Esto es similar a undefined's answer pero no abusa de una propiedad de CSS real.

Nota: El nombre de la propiedad personalizada debe ser un nombre jQuery.camelCase() desde .animate() utiliza los nombres CamelCased internamente y por lo tanto, se almacenará el valor actual de la propiedad utilizando el nombre CamelCased y la fx.prop también será el nombre CamelCased .

Answer 4

Olvídese de jQuery's $.animate(), en su lugar use $.velocity(). Velocity.js es una extensión de animación de jQuery. Utiliza la misma sintaxis que jQuery y le permite animar CSS3 como transformaciones 3D, traduce, rota, desvanecimiento de color, transiciones, sesgos, ... Cualquier cosa que desee. Y dado que es lo suficientemente inteligente como para usar CSS3 en lugar de JS siempre que sea posible, también se anima con un mejor rendimiento. ¡No entiendo por qué jQuery aún no hace esto!

http://julian.com/research/velocity/