CSS3 TranslateX 相对于当前位置，如 jQuery animate

Question

我正在创建某种幻灯片，其设置如下：

<div class="slideshow">
    <div class="slide">slide1</div>
    <div class="slide">slide2</div>
    <div class="slide">slide3</div>
</div>

为了完成这项工作，我使用 jQuery animate 函数将（绝对定位的）幻灯片向左或向右移动。这是通过使用相对 (-= , +=) 属性来完成的，如下所示：

$('.slide').animate({ left: '+=300' }, 500);

但这似乎在平板电脑或手机等设备上变得非常缓慢。因此，我想为此使用 CSS3 进行一些性能优化。但是......如何做到这一点？

我尝试了类似的方法：

$('.slide').css({
    'transition' : 'all 1.0s ease-in-out',
    'transform' : 'translateX(-'300px)'
});

但这只能工作一次（呃）。尽管如此，将 - 更改为 -= 也不起作用。所以实际的问题是。 jQuery 在 CSS3 中的相关功能如何做？

谢谢！

Answer 1

您可以使用.animate() 的step 属性

步骤的快速使用示例：

$(element).animate({opacity:1},{
   duration: 500,
   step:function(now, fn){
      fn.start = 0;
      fn.end = 300;
      $(element).css({'left':now});
   }
});

fn.start - 是起点，fn.end 是终点，例如你想增加 0 到 300px。

关于此代码：transition:all 500ms ease-out 0s;，您可以将其留在 CSS 文件中。我希望我已经给出了一些想法。谢谢

编辑：应用 translateX

 step:function(now, fn){
            fn.start = 0;
            fn.end = 300;
            $(element).css({
                 '-webkit-transform':'translateX('+now+'%)'
                ,'-moz-transform':'translateX('+now+'%)'
                ,'transform':'translateX('+now+'%)'
            });
          }