JQuery animate a -webkit-transform

Question

Can jQuery be used to animate webkit translate3d animation?

I read that when using the animate jQuery property you need a camel if you use the css properties, but in the case of translate3d this does not work.

Do I have the following code that I would like to revive, and not just right away?

$("#main-nav").css('-webkit-transform', "translate3d(0px, " + e + "px, 0px) scale(1)"); 

For clarification, “e” is a variable that is passed to the function from which my code above is executed.

Answer 1

Use text-indent and it will work. Example:

 $(".test").animate({ textIndent: 100 }, { step: function(now,fx) { $(this).css('-webkit-transform',"translate3d(0px, " + now + "px, 0px)"); }, duration:'slow' },'linear'); 

Alternatively, you can remove scale(1) from -webkit-transform .

JSFIDDLE

To avoid changing a useful property, you can provide any property. See the example below:

 $(".test").animate({ whyNotToUseANonExistingProperty: 100 }, { step: function(now,fx) { $(this).css('-webkit-transform',"translate3d(0px, " + now + "px, 0px)"); }, duration:'slow' },'linear'); 

JSFIDDLE

And because I'm a Firefox fan, use Firefox compatibility by adding this line, like here :

 $(this).css('-moz-transform',"translate3d(0px, " + now + "px, 0px)"); 

Answer 2

I think that you can try to animate a property that jQuery does not support initially, it is best to use a plugin, for example: http://ricostacruz.com/jquery.transit/

Instead of using the .animate function, you should use .transition, for example the following:

 $("#main-nav").transition({ "-webkit-transform": "translate3d(0px, " + e + "px, 0px) scale(1)" }); 

Answer 3

I do this by animating an arbitrary value and then using the step callback to apply some CSS that I wrote in a simple method. Perhaps some experts may overhear why this is good or bad, but it works for me and does not force me to install any additional plugins. Here is an example.

In this example, I apply the 100px transform and then reduce it to 0 using the jQuery .animate() method.

 var $elem , applyEffect ; $elem = $('.some_elements'); applyEffect = function ($e, v) { $e.css({ '-webkit-transform': 'translate3d(0px, ' +String(v)+ 'px, 0px)' , '-moz-transform': 'translate3d(0px, ' +String(v)+ 'px, 0px)' , 'transform': 'translate3d(0px, ' +String(v)+ 'px, 0px)' }); }; applyEffect($elem, 100); $elem.animate({ foo: 100 }, { duration: 1000 , step: function (v) { applyEffect($elem, 100 - v); } } );