如何动画CSS翻译

Question

是否可以通过jquery为CSS属性转换设置动画？

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

它在许多浏览器中都有效吗？

演示不起作用:http://jsfiddle.net/ignaciocorreia/xWCVf/

更新:

我的解决方案

1. 简单的实现 - http://jsfiddle.net/ignaciocorreia/R3EaJ/
2. 复杂的实现和多浏览器 - http://ricostacruz.com/jquery.transit/

Answer 1

有jQuery插件可以帮助您实现这一目标:http://ricostacruz.com/jquery.transit/

Answer 2

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

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

Answer 3

根据CanIUse你应该让它有多个前缀。

\n\n

$(\'div\').css({\n    "-webkit-transform":"translate(100px,100px)",\n    "-ms-transform":"translate(100px,100px)",\n    "transform":"translate(100px,100px)"\n  });\xe2\x80\x8b\n

\n

Answer 4

有一种有趣的方法可以通过animate以独特的方式使用jQuery 方法来实现,您可以animate在javascript对象上调用该方法来描述该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}] )

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>jQuery animate <pre>transform:translateY()</pre></h1>