Is it possible to animate the CSS property translate via jquery?
$('.myButtons').animate({"transform":"translate(50px,100px)"})
and does it work in many browsers?
Demo not working: http://jsfiddle.net/ignaciocorreia/xWCVf/
UPDATE:
My solutions:
Animating your Transforms If you think that's cool, realise that CSS Animation can be applied not just to the transforms, but also to other CSS properties including: opacity, colour and a bunch of others.
Specify the Speed Curve of the Transition The transition-timing-function property can have the following values: ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default) linear - specifies a transition effect with the same speed from start to end.
transformation: translate(0,10%) rotate(25deg); The rotate operation is done first, then the translate . Show activity on this post. There is no need for that, as you can use css 'writing-mode' with values 'vertical-lr' or 'vertical-rl' as desired.
With CSS3 we can specify how an element changes by just describing its current and target states. CSS3 will create a smooth transition between these states by applying a cubic Bézier curve and gradually change the element appearance.
$('div').css({"-webkit-transform":"translate(100px,100px)"});
http://jsfiddle.net/xWCVf/5/
There are jQuery-plugins that help you achieve this like: http://ricostacruz.com/jquery.transit/
There's an interesting way which this can be achieved by using jQuery animate
method in a unique way, where you call the animate
method on a javascript Object which describes the from
value and then you pass as the first parameter another js object which describes the to
value, and a step
function which handles each step of the animation according to the values described earlier.
translateY
:var $elm = $('h1'); // element to be moved
function run( v ){
// clone the array (before "animate()" modifies it), and reverse it
var reversed = JSON.parse(JSON.stringify(v)).reverse();
$(v[0]).animate(v[1], {
duration: 500,
step: function(val) {
$elm.css("transform", `translateY(${val}px)`);
},
done: function(){
run( reversed )
}
})
};
// "y" is arbitrary used as the key name
run( [{y:0}, {y:80}] )
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>jQuery animate <pre>transform:translateY()</pre></h1>
According to CanIUse you should have it with multiple prefixes.
$('div').css({
"-webkit-transform":"translate(100px,100px)",
"-ms-transform":"translate(100px,100px)",
"transform":"translate(100px,100px)"
});
I too was looking for a good way to do this, I found the best way was to set a transition on the "transform" property and then change the transform and then remove the transition.
I put it all together in a jQuery plugin
https://gist.github.com/dustinpoissant/8a4837c476e3939a5b3d1a2585e8d1b0
You would use the code like this:
$("#myElement").animateTransform("rotate(180deg)", 750, function(){
console.log("animation completed after 750ms");
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With