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动画功能将(绝对定位的)幻灯片向左或向右移动.这是通过使用相对( - =,+ =)属性完成的,如下所示:

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

但这似乎在平板电脑或手机等设备上变得非常慢.所以,我想用CSS3做一些性能优化.但是......怎么做到这一点？

我尝试过类似的东西:

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

但那只能工作一次(呃).然而,改变 - 到 - =也不起作用.所以实际问题是.如何做jQuery在CSS3中做的相对的事情？

谢谢!

Answer 1

您可以使用步骤属性.animate()

只是一个快速使用的步骤示例:

$(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+'%)'
            });
          }