如何使用CSS实现动画平移效果

Question

是否可能通过jquery动画CSS属性translate？

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

它在许多浏览器上都能正常工作吗？

演示未能正常运行：http://jsfiddle.net/ignaciocorreia/xWCVf/

更新：

我的解决方案：

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

- Ignacio Correia

---

我猜测，如果有用的话，它只能在 Webkit 浏览器中运行！ - adeneo

这是如何实现的 -> FIDDLE - adeneo

你也可以通过改变左侧和顶部位置来实现，而无需进行翻译... http://jsfiddle.net/xWCVf/4/ - XCS

那个我知道，不过还是谢谢。我真的想要并需要尝试翻译。 - Ignacio Correia

使用.css()代替animate，并添加CSS过渡效果。阅读http://css3.bradshawenterprises.com/transitions/以帮助您。 - Rich Bradshaw

Answer 1

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

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

- Praveen Vijayan

---

只需为其添加CSS过渡即可。 - Rich Bradshaw

@IgnácioR.Correia - 更新的链接 - Praveen Vijayan

很简单 :D ! 谢谢。您的解决方案和 http://ricostacruz.com/jquery.transit/ 是前进的道路！感谢大家。 - Ignacio Correia

一个小提示，您不需要使用供应商，jQuery 1.7+可以正确添加此内容。 - Neil

你还应该编辑并添加说明，需要在其中添加CSS过渡效果。 - krummens

Answer 2

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

- flec

---

让我们试试吧。我只想在我的网站上添加一行代码。它不需要整个库。 - Ignacio Correia

如果你正在寻找一个跨浏览器的解决方案，我认为使用插件/库是最好的方法。此外，由于你已经在使用jQuery库，所以这也是一种选择。 - flec

我已经在使用它了。非常酷。运行得很好。谢谢。 - Ignacio Correia

Answer 3

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

- vsync

Answer 4

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

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

- Jason Lydon

---

自从jQuery 1.8版本起，您不再需要指定供应商前缀。http://api.jquery.com/css/#css2 - davidgoli

原帖询问关于“动画”，但是这段代码并不涉及动画。 - Simon East

Answer 5

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

我将所有内容整合到了一个jQuery插件中。

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

您会像这样使用代码：

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

- Dustin Poissant

Answer 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>

- GIA

---

很遗憾，这并没有回答关于特定动画transform: translate()的原始问题。 - Simon East