Animazione di una trasformazione CSS con jQuery

Question

Sto provando ad animare un div e farlo ruotare attorno all'asse y di 180 gradi. Quando chiamo il seguente codice ottengo un errore di jQuery:

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

Si dice "Uncaught TypeError: Impossibile leggere la proprietà 'defaultView' di indefinito" e dice che è in jQuery file stesso ... quello che sto facendo di sbagliato ?

Answer 1

Prova questo:

$('#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

È anche possibile predefinire la rotazione in una classe CSS e utilizzare jQuery per aggiungere/rimuovere la classe:

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 non può animare proprietà di trasformazione, fuori dalla scatola. Ma è possibile animare proprietà personalizzate con .animate() e fare "manualmente" la trasformazione utilizzando il 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 
     } 
    }); 

Vedere this fiddle per un esempio di lavoro (fare clic sulla casella blu).

Questo è simile a undefined's answer ma non abusa di una reale proprietà CSS.

Nota: Il nome della proprietà personalizzata dovrebbe essere un nome jQuery.camelCase() dal .animate() utilizza i nomi in formato camelCase internamente e quindi, memorizzerà il valore corrente della proprietà utilizzando il nome formato camelCase e la fx.prop sarà anche il nome formato camelCase .

Answer 4

Dimentica jQuery $.animate(), utilizzare invece $.velocity(). Velocity.js è un'estensione di animazione di jQuery. Usa la stessa sintassi di jQuery e ti permette di animare CSS3 come trasformazioni 3D, traslazioni, rotazioni, dissolvenze di colore, transizioni, inclinazioni, ... Tutto ciò che vuoi. E poiché è abbastanza intelligente usare CSS3 invece di JS ove possibile, si anima anche con una migliore performance. Non capisco perché jQuery non lo faccia ancora!

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