8

是否可以使用 jQuery 为 webkit translate3d 设置动画？

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

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

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

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

4

3 回答 3

21

使用 a text-indent，它会工作。例子：

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

此外，您可以scale(1)从-webkit-transform.

JSFIDDLE

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

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

JSFIDDLE

因为我是 Firefox 粉丝，所以请实现 Firefox 兼容性也添加这一行，像这里：

$(this).css('-moz-transform',"translate3d(0px, " + now + "px, 0px)");
于 2013-06-06T09:56:54.847 回答
5

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

而不是使用 .animate 函数，您将使用 .transition ，如下所示：

$("#main-nav").transition({ "-webkit-transform": "translate3d(0px, " + e + "px, 0px) scale(1)" });
于 2013-06-06T09:54:31.790 回答
1

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

.animate()在这个例子中，我应用了一个 100px 的变换，然后使用 jQuery方法将它减小到 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);
  }
}
);
于 2014-10-06T17:59:12.030 回答