jQuery 动画 -webkit-transform答案

【问题标题】：jQuery animate a -webkit-transformjQuery 动画 -webkit-transform
【发布时间】：2013-06-02 06:31:00
【问题描述】：

是否可以使用 jQuery 为 webkit translate3d 制作动画？

我读到，当使用 jQuery 的 animate 属性时，您必须使用 css 属性的驼峰式大小写，但在 translate3d 的情况下，这似乎不起作用。

我有以下代码，我想制作动画而不是立即执行？

$("#main-nav").css('-webkit-transform', "translate3d(0px, " + e + "px, 0px) scale(1)");

为了澄清，“e”是一个变量，它传递给运行我上面的代码的函数。

【问题讨论】：

camelCase 在传递给动画函数时不是必须的

标签： javascript jquery css jquery-animate

【解决方案1】：

我认为您可能正在尝试为 jQuery 本身不支持的属性设置动画，您最好的选择可能是使用这样的插件：http://ricostacruz.com/jquery.transit/

您可以使用 .transition 来代替使用 .animate 函数，如下所示：

$("#main-nav").transition({ "-webkit-transform": "translate3d(0px, " + e + "px, 0px) scale(1)" });

【讨论】：

只有在原生支持 jQuery 的情况下才能完成。见my answer。
@John 有趣的回答，你每天都能学到新东西 +1 ;-)
请注意：jquery.transit 使用您的目标设备可能不支持的 CSS 过渡

【解决方案2】：

使用text-indent 即可。示例：

$(".test").animate({ textIndent: 100 }, {
    step: function(now,fx) {
        $(this).css('-webkit-transform',"translate3d(0px, " + now + "px, 0px)");
    },
    duration:'slow'
},'linear');

此外，您可以从-webkit-transform 中删除scale(1)。

JSFIDDLE

为避免更改有用的属性，您可以在此处提供任何属性。请参阅下面的示例：

$(".test").animate({ whyNotToUseANonExistingProperty: 100 }, {
    step: function(now,fx) {
        $(this).css('-webkit-transform',"translate3d(0px, " + now + "px, 0px)");
    },
    duration:'slow'
},'linear');

JSFIDDLE

因为我是火狐粉丝，请实现火狐兼容性也加入这一行，如here：

$(this).css('-moz-transform',"translate3d(0px, " + now + "px, 0px)");

【讨论】：

text-indent 这里是动画，然后触发步骤回调。我建议改用不透明度，因为如果动画元素包含其他元素，它并不会真正改变动画的预期行为：jsfiddle.net/xXWYW/2
感谢您的回答和支持 cmets 伙计们，我已经设法使用您的 JSFiddles 作为基础 A*** 使其正常工作
@user2440843，不客气。我们也在这里学习，帮助他人。 :-)
我无法获得工期，或延迟上班...您有什么原因吗？这是我的代码 - $("#wheel").animate({ textIndent: 100 }, { step: function(now,fx) { $(this).css('-webkit-transform',"rotate(0deg) "); },duration:'slow'}, 'swing');
@LiamShalon 你有一个语法错误，你没有使用now 参数来为元素设置动画。这应该工作：$("#wheel").animate({ textIndent: 100 }, { step: function(now,fx) { $(this).css('-webkit-transform',"rotate(" + now + "deg)"); }, duration:'slow'}, 'swing');

【解决方案3】：

我通过为任意值设置动画然后使用step 回调来应用一些我已经写入一个简单方法的 CSS 来做到这一点。也许一些专家可以解释为什么这是好的或坏的，但它对我有用并且不会强迫我安装任何额外的插件。这是一个例子。

在这个例子中，我应用了一个 100px 的变换，然后使用 jQuery .animate() 方法将其减小到 0。

var $elem
  , applyEffect
  ;

$elem = $('.some_elements');

applyEffect = function ($e, v) {
  $e.css({
    '-webkit-transform': 'translate3d(0px, ' +String(v)+ 'px, 0px)'
  , '-moz-transform': 'translate3d(0px, ' +String(v)+ 'px, 0px)'
  , 'transform': 'translate3d(0px, ' +String(v)+ 'px, 0px)'
  });
};

applyEffect($elem, 100);

$elem.animate({
  foo: 100
}, {
  duration: 1000
, step: function (v) {
    applyEffect($elem, 100 - v);
  }
}
);

【讨论】：