29

是否可以通过 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/
4

6 回答 6

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

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

于 2012-12-23T15:33:53.670 回答
8

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

于 2012-12-23T15:25:13.573 回答
7

有一种有趣的方式可以通过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>

于 2017-08-24T08:48:21.903 回答
5

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

$('div').css({
    "-webkit-transform":"translate(100px,100px)",
    "-ms-transform":"translate(100px,100px)",
    "transform":"translate(100px,100px)"
  });​
于 2014-05-16T16:00:23.903 回答
1

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

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

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

你会使用这样的代码:

$("#myElement").animateTransform("rotate(180deg)", 750, function(){
  console.log("animation completed after 750ms");
});
于 2017-04-13T17:01:21.353 回答
-1

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

于 2016-07-12T14:52:07.707 回答