1

我正在查看swipe.js的源代码，这是一个跨浏览器库，用于在支持触摸的设备上创建动画幻灯片。

为了创建动画，swipe.js 使用 CSS3 转换（如果必须的话，可以使用 Javascript 动画。）所以，他们用来进行实际 CSS3 转换的 translate 函数是：

 function translate(index, dist, speed) {

    var slide = slides[index];
    var style = slide && slide.style;

    if (!style) return;

    style.webkitTransitionDuration =
    style.MozTransitionDuration =
    style.msTransitionDuration =
    style.OTransitionDuration =
    style.transitionDuration = speed + 'ms';

    style.webkitTransform = 'translate(' + dist + 'px,0)' + 'translateZ(0)';
    style.msTransform =
    style.MozTransform =
    style.OTransform = 'translateX(' + dist + 'px)';

  }

所以，基本上为了制作这个跨浏览器，他们必须为 Webkit、Mozilla、Microsoft 和 Opera 设置不同的转换属性。我不明白为什么他们对 webkit 使用该函数（它需要两个参数），而对其他所有东西 translate使用单参数函数。translateX

据我从Mozilla和Microsoft文档中可以看出，这两个引擎都translate支持translateX. swipe.js 的作者决定在translateX这里用于非 webkit 浏览器是否有某种原因？实际上是否有一些浏览器支持translateX但不支持translate？

4

1 回答 1

0

看起来这是有历史原因的，在添加对 Firefox、Opera 和 IE 的支持时，它们都只支持 2d 转换。几个月后在 firefox中添加了对 3d 变换的支持，IE10 也支持它，所以它实际上仍然只是 Opera 所必需的，但我想它留在那里是为了向后兼容。

更新

哎呀，我以为我读过translate3d，但在以后的版本中，它只是translate，就像你发布的一样。因此，看起来它们已更改为translate+translateZ因为在 iOS6translate3d中将不再触发硬件加速，可能与translateX.

于 2013-06-20T14:35:47.490 回答