Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
jQuery Plugin to Animate Transforms
$.fn.animateTransform = function(/* [start,] end [, duration] [, callback] */){
var start = null, end = null, duration = 400, callback = function(){};
for(var i=0; i<arguments.length; i++){
if(typeof(arguments[i]) == "string"){
if(!start) start = arguments[i];
else end = arguments[i];
} else if(typeof(arguments[i]) == "number"){
duration = arguments[i];
} else if(typeof(arguments[i]) == "function"){
callback = arguments[i];
}
}
if(start && !end){
end = start;
start = null;
}
if(!end) return;
if(start){
this.css("transform", start);
}
if(duration < 16) duration = 16;
var transitionB4 = this.css("transition");
this.css("transition", "transform " + duration + "ms");
this.css("transform", end);
var $el = this;
setTimeout(function(){
$el.css("transition", transitionB4 || "");
$el.css("transform", end);
callback();
}, duration);
};
$.fn.animateTransform=function(){for(var a=null,b=null,c=400,d=function(){},e=0;e<arguments.length;e++)"string"==typeof arguments[e]?a?b=arguments[e]:a=arguments[e]:"number"==typeof arguments[e]?c=arguments[e]:"function"==typeof arguments[e]&&(d=arguments[e]);if(a&&!b&&(b=a,a=null),b){a&&this.css("transform",a),c<16&&(c=16);var f=this.css("transition");this.css("transition","transform "+c+"ms"),this.css("transform",b);var g=this;setTimeout(function(){g.css("transition",f||""),g.css("transform",b),d()},c)}};
@charliefr
Copy link

charliefr commented Jul 2, 2018

I think once transform start, the animate must go done, you can't stop in middle,
so I suggest add a mark like this.addClass('is-processing'), when animateTransform triggered again,
we can check the mark , if it's in processing, return and do nothing ,
and when transform done,we can remove the mark,

English is not my 1st language hope you know what I mean, your code give me a lot help ,thank you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment