动画 translate3d 并使用 jquery 缩放？答案

【问题标题】：Animate translate3d and scale with jquery?动画 translate3d 并使用 jquery 缩放？
【发布时间】：2016-03-24 07:00:22
【问题描述】：

所以我有一个 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 个自变量时，我不确定它是如何工作的。

【问题讨论】：

标签： javascript jquery css jquery-animate

【解决方案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');

【讨论】：