【问题标题】：How to animate CSS Translate如何动画 CSS 翻译
【发布时间】：2012-12-10 07:55:43
【问题描述】：

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

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

它是否适用于许多浏览器？

演示不工作：http://jsfiddle.net/ignaciocorreia/xWCVf/

更新：

我的解决方案：

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

【问题讨论】：

我猜一下，说它只适用于 webkit 浏览器，如果有的话！
我找到了这个例子：jsfiddle.net/qGEmy/7 但我似乎无法让它与我的例子一起工作。
这就是你的做法 -> FIDDLE
你也可以在不平移、改变左上角位置的情况下做到这一点...jsfiddle.net/xWCVf/4
我知道但还是谢谢你。我真的很想也需要玩翻译。

标签： jquery css jquery-animate jquery-transit

【解决方案1】：

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

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

【讨论】：

只需添加一个 CSS 过渡。
@IgnácioR.Correia - 更新链接
简单：D！谢谢。你的解决方案和ricostacruz.com/jquery.transit 是要走的路！谢谢大家。
附注您不需要使用供应商，jQuery 1.7+ 正确添加。
您还应该编辑添加您需要向其添加 CSS 过渡

【解决方案2】：

有一些 jQuery 插件可以帮助您实现这一点，例如：http://ricostacruz.com/jquery.transit/

【讨论】：

让我们试试吧。我想要的只是在我的网站上添加一行代码。它不需要整个库。
@IgnácioR.Correia 如果您正在寻找跨浏览器解决方案，我认为插件/库是您的最佳选择。除了使用 jQuery，你已经在使用库了。
我已经在玩它了。很酷。奇迹般有效。谢谢。

【解决方案3】：

有一种有趣的方式可以通过以独特的方式使用 jQuery animate 方法来实现，您可以在描述 from 值的 javascript 对象上调用 animate 方法，然后作为第一个传递参数另一个描述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>

【讨论】：

【解决方案4】：

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

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

【讨论】：

从 jQuery 1.8 开始，您不再需要指定供应商前缀。 api.jquery.com/css/#css2
原发帖人询问了这段代码没有做的动画。

【解决方案5】：

我也在寻找一种好方法来做到这一点，我发现最好的方法是在“transform”属性上设置一个转换，然后更改转换，然后删除转换。

我把它们放在一个 jQuery 插件中

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

你会使用这样的代码：

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

【讨论】：

【解决方案6】：

您需要在 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>

【讨论】：

不幸的是，这并没有回答关于动画 transform: translate() 的原始问题。

示例 - 动画变换 translateY:

示例 - 动画变换 `translateY`: