Animowanie transformacji CSS za pomocą jQuery

Question

Próbuję animować element div i ustawić go tak, aby obracał się wokół osi Y o 180 stopni. Kiedy zadzwonić następujący kod pojawia się błąd jQuery:

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

mówi „Uncaught TypeError: nie można odczytać właściwość«defaultview»undefined” i mówi, że to w jQuery się złożyć ... Co robię źle ?

Answer 1

Spróbuj tego:

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

Można również wstępnie zdefiniować obrót w klasie CSS i użyć jQuery aby dodać/usunąć klasę:

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 nie można animować właściwości transformaty po wyjęciu z pudełka. Ale można animować właściwości niestandardowe z .animate() i zrobić transformację „ręcznie” za pomocą 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 
     } 
    }); 

Zobacz this fiddle na przykład pracy (kliknij na niebieskim polu).

Jest to podobne do undefined's answer, ale nie nadużywa prawdziwej właściwości CSS.

Uwaga: Nazwa właściwości niestandardowej powinna być nazwa jQuery.camelCase() od .animate() używa nazw camelCased wewnętrznie i dlatego będzie przechowywać aktualną wartość nieruchomości przy użyciu nazwy camelCased i fx.prop będzie również nazwa camelCased .

Answer 4

Zapomnij o jQuery's $.animate(), zamiast tego użyj $.velocity(). Velocity.js to rozszerzenie animacji jQuery. Używa tej samej składni co jQuery i pozwala na animowanie CSS3, takiego jak transformacje 3D, translacja, obracanie, blaknięcie kolorów, przejścia, pochylenia ... Cokolwiek chcesz. A ponieważ jest wystarczająco inteligentny, aby używać CSS3 zamiast JS tam, gdzie to możliwe, animuje się z lepszą wydajnością. Nie rozumiem, dlaczego jQuery tego jeszcze nie robi!

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