Question

所以我有一个css命令可以同时编辑对象的3d平移及其比例到不同的值。

_this.css('-webkit-transform', 'translate3d('+X+'px, '+Y+'px, 0) scale('+scaleFactor+', '+scaleFactor+')');

这很有效，但它会立即发生，我想使用jquery为它设置动画，就像你可以设置宽度和高度的动画一样。所以我在SO上看到的解决方案就是这个的变种。

$('#foo').animate({  borderSpacing: -90 }, {
    step: function(now,fx) {
      $(this).css('transform','rotate('+now+'deg)');  
    },
    duration:'slow'
},'linear');

如果borderSpacing的某个值设置为0，则最终目标为-90，它将逐步并缓慢旋转。但是这只适用于一个变量，当我有3个完全不同的变量时，我可以这样做吗？如果是这样怎么样？在前面提到的解决方案中，步进创建了一个now变量，这是朝向最终目标的一些渐进步骤，但是当我有3个独立变量时，我不确定这是如何工作的。

Answer 1

您最好的方法是将css规则应用于您的元素

#foo{
   transition: all 700ms linear;
}

并仅使用脚本的第一部分（应用新转换值的位置）

如果你必须采用.animate方式，那么该对象可以容纳多个属性，并且每个属性都会调用step函数

$('#foo').animate({  borderSpacing: -90, otherProp: 80 }, {
    step: function(now,fx) {
      switch(fx.prop){
          case 'borderSpacing': 
               $(this).css('transform','rotate('+now+'deg)');
               break;
          case 'otherProp':
               $(this).css('something else', now);
               break;
      }
    },
    duration:'slow'
},'linear');

使用jquery动画translate3d和缩放？

1 个答案: