用 jQuery 动画 translate3d

Posted 2023-03-06

【中文标题】用 jQuery 动画 translate3d

【英文标题】：Animate translate3d with jQuery

【发布时间】：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

【参考方案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