用 jQuery 动画 translate3d答案

【问题标题】：Animate translate3d with jQuery用 jQuery 动画 translate3d
【发布时间】：2015-02-02 19:50:22
【问题描述】：

我正在尝试使用 Jquery 2.1.1 为 translate3d 设置动画。在 10 秒内。然后，当动画完成时，我希望它提醒我。但问题是它没有动画。它只是立即更改为新的 css。

有没有什么英雄可以帮我解决这个问题？

我现在使用的代码：

$( ".circle" ).animate({ textIndent: 100 }, {
    duration : 10000,
    step : function() {
      $(this).css("transform","translate3d(0px, 320px, 0px)"); 
    }, 
    complete : function() {
        alert("completed the animation");
    }
},'linear');

【问题讨论】：

您是否尝试过使用像这个人写的那样的辅助函数？ cameronspear.com/blog/animating-translate3d-with-jquery

标签： jquery css animation transform

【解决方案1】：

基本上使用 animate 和 transform 你必须使用 jQuery 的 animate 函数的 step 函数，看起来有点像这样：

$('.animate').animate({
    'opacity': '320'
}, {
    step: function (now, fx) {
        $(this).css({"transform": "translate3d(0px, " + now + "px, 0px)"});
    },
    duration: 10000,
    easing: 'linear',
    queue: false,
    complete: function () {
        alert('Animation is done');
    }
}, 'linear');

您必须单独设置文本缩进，但基本上您做错的是每次调用 step 函数时，该值都直接设置为 320px，而不是按原样设置。这可以通过使用两个独立的函数并使用不重要的 css 规则来创建动画曲线所需的值来解决。您还需要将队列设置为 false，以便两个动画同时发生，而不是一个接一个地发生

最终的 sn-p 代码如下所示：

$('.animate').animate({
    'opacity': '320'
}, {
    step: function (now, fx) {
        $(this).css({"transform": "translate3d(0px, " + now + "px, 0px)"});
    },
    duration: 10000,
    easing: 'linear',
    queue: false,
    complete: function () {
        alert('Animation is done');
    }
}, 'linear');
$(".animate").animate({ textIndent: 100 }, {
    duration : 10000,
    easing: 'linear',
    queue: false
});

这是一个有效的小提琴：

http://jsfiddle.net/Hive7/1qu2qxqh/

【讨论】：

你太棒了，非常感谢你帮助我，我没明白，但现在我看到了解决方法是如何构建的，继续做英雄吧:)
还有一个问题，是否也可以从当前的 translate3d 动画到新的？
是的，要从当前转换到下一个，您所要做的就是找到当前并将您的步骤值设置为该值，然后在有意义的情况下进行动画处理@RobBoerman

【解决方案2】：

您可以使用 jquery.transit jQuery 插件进行 css3 转换：

$('.box').transition({ rotate: '45deg' });
$('.box').transition({ scale: 2.2 });
$('.box').transition({ skewY: '30deg' });
$('.box').transition({
  perspective: '100px',
  rotate3d: '1,1,0,180deg'
});

非常好的插件和许多功能

延迟、可选单元、供应商前缀、链接和排队、备用缓动/持续时间语法、相对值、转换起源和缓和

Demo Here

【讨论】：