jQuery 如何动画 CSS 翻译
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14012105/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to animate CSS Translate
提问by Ignacio Correia
Is it possible to animate the CSS property translate via jquery?
是否可以通过 jquery 为 CSS 属性翻译设置动画？
$('.myButtons').animate({"transform":"translate(50px,100px)"})
and does it work in many browsers?
它是否适用于许多浏览器？
Demo not working: http://jsfiddle.net/ignaciocorreia/xWCVf/
演示不起作用：http: //jsfiddle.net/ignaciocorreia/xWCVf/
UPDATE:
更新：
My solutions:
我的解决方案：
- Simple implementations - http://jsfiddle.net/ignaciocorreia/R3EaJ/
- Complex implementation and multi-browser - http://ricostacruz.com/jquery.transit/
- 简单的实现 - http://jsfiddle.net/ignaciocorreia/R3EaJ/
- 复杂的实现和多浏览器 - http://ricostacruz.com/jquery.transit/
采纳答案by Praveen Vijayan
$('div').css({"-webkit-transform":"translate(100px,100px)"});?
回答by flec
There are jQuery-plugins that help you achieve this like: http://ricostacruz.com/jquery.transit/
有 jQuery 插件可以帮助您实现这一点，例如：http: //ricostacruz.com/jquery.transit/
回答by vsync
There's an interesting way which this can be achieved by using jQuery animatemethod in a unique way, where you call the animatemethod on a javascript Object which describes the fromvalue and then you pass as the first parameter another js object which describes the tovalue, and a stepfunction which handles each step of the animation according to the values described earlier.
有一种有趣的方法可以通过animate以独特的方式使用 jQuery方法来实现这一点，您可以在animate描述该from值的 javascript 对象上调用该方法，然后将另一个描述该to值的js 对象和一个step函数作为第一个参数传递它根据前面描述的值处理动画的每个步骤。
Example - Animate transform translateY:
示例 - 动画变换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>回答by Jason Lydon
回答by Dustin Poissant
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
我把它放在一个 jQuery 插件中
https://gist.github.com/dustinpoissant/8a4837c476e3939a5b3d1a2585e8d1b0
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");
});
回答by Guilherme IA
You need set the keyframes animation in you CSS. And use the keyframe with jQuery:
您需要在 CSS 中设置关键帧动画。并在 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>