使用 jquery 动画化 translate3d 和缩放？

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 和缩放？

Animate translate3d and scale with jquery?

javascript

css

jquery

jquery-animate