jquery - fast - Cómo animar CSS Translate

jquery css transform translate

Question

¿Es posible animar la propiedad CSS traducida a través de jquery?

$(''.myButtons'').animate({"transform":"translate(50px,100px)"})

¿Y funciona en muchos navegadores?

La demostración no funciona: http://jsfiddle.net/ignaciocorreia/xWCVf/

ACTUALIZAR:

Mis soluciones:

1. Implementaciones simples - http://jsfiddle.net/ignaciocorreia/R3EaJ/
2. Implementación compleja y multi-navegador - http://ricostacruz.com/jquery.transit/

Answer 1

De acuerdo con CanIUse debes tenerlo con múltiples prefijos.

$(''div'').css({
"-webkit-transform":"translate(100px,100px)",
"-ms-transform":"translate(100px,100px)",
"transform":"translate(100px,100px)"
});​

Answer 2

Existe una forma interesante de lograr esto utilizando el método jQuery animate de una manera única, al llamar al método animate en un objeto javascript que describe el valor from y luego pasa como primer parámetro otro objeto js que describe el valor a y una función de step que maneja cada paso de la animación de acuerdo con los valores descritos anteriormente.

Ejemplo - Animate transform 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>

Answer 3

Hay jQuery-plugins que te ayudan a lograr esto como: http://ricostacruz.com/jquery.transit/

Answer 4

Necesitas configurar la animación de fotogramas clave en tu CSS. Y usa el fotograma clave con jQuery:

$(''#myTest'').css({"animation":"my-animation 2s infinite"});

#myTest {
width: 50px;
height: 50px;
background: black;
}
@keyframes my-animation {
0% {
background: red;
}
50% {
background: blue;
}
100% {
background: green;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myTest"></div>

Answer 5

Yo también estaba buscando una buena manera de hacer esto, encontré que la mejor manera era establecer una transición en la propiedad "transformar" y luego cambiar la transformación y luego eliminar la transición.

Lo puse todo junto en un plugin jQuery

https://gist.github.com/dustinpoissant/8a4837c476e3939a5b3d1a2585e8d1b0

Usarías el código así:

$("#myElement").animateTransform("rotate(180deg)", 750, function(){
console.log("animation completed after 750ms");
});

Answer 6

$(''div'').css({"-webkit-transform":"translate(100px,100px)"});​

http://jsfiddle.net/xWCVf/5/