如何动画CSS翻译
是否可以通过jquery动画CSS属性翻译?
$('.myButtons').animate({"transform":"translate(50px,100px)"})
它在许多浏览器中都有效吗?
演示不起作用: http : //jsfiddle.net/ignaciocorreia/xWCVf/
更新:
我的解决方案
- 简单的实现 – http://jsfiddle.net/ignaciocorreia/R3EaJ/
- 复杂的实现和多浏览器 – http://ricostacruz.com/jquery.transit/
$('div').css({"-webkit-transform":"translate(100px,100px)"});
有jQuery插件可以帮助您实现这一目标: http : //ricostacruz.com/jquery.transit/
根据CanIUse,你应该有多个前缀。
$('div').css({ "-webkit-transform":"translate(100px,100px)", "-ms-transform":"translate(100px,100px)", "transform":"translate(100px,100px)" });
有一种有趣的方法可以通过以独特的方式使用jQuery animate
方法来实现,您可以在javascript对象上调用animate
方法来描述from
值,然后作为第一个参数传递另一个描述to
值的js对象,以及根据前面描述的值处理动画的每个步骤的step
函数。
示例 – 动画变换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}] )
jQuery animate transform:translateY()
我也在寻找一种好方法,我发现最好的方法是在“转换”属性上设置转换,然后更改转换,然后删除转换。
我把它放在一个jQuery插件中
https://gist.github.com/dustinpoissant/8a4837c476e3939a5b3d1a2585e8d1b0
你会使用这样的代码:
$("#myElement").animateTransform("rotate(180deg)", 750, function(){ console.log("animation completed after 750ms"); });
您需要在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; } }