2

我有以下代码，

    gallery.css("transition-duration", duration + "ms");
    gallery.css("-webkit-transition-duration", duration + "ms");
    gallery.css("-moz-transition-duration", duration + "ms");
    gallery.css("-ms-transition-duration", duration + "ms");
    gallery.css("-o-transition-duration", duration + "ms");
    //inverse the number we set in the css
    var value = (distance < 0 ? "" : "-") + Math.abs(distance).toString();

    gallery.css("transform", "translate3d(" + value + "px,0,0)");
    gallery.css("-webkit-transform", "translate3d(" + value + "px,0,0)");
    gallery.css("-moz-transform", "translate3d(" + value + "px,0,0)");
    gallery.css("-ms-transform", "translate3d(" + value + "px,0,0)");
    gallery.css("-o-transform", "translate3d(" + value + "px,0,0)");

它在 chrome、andriod、Iphone 中工作得更好。但在 IE 10（在移动设备上）上不起作用，Firefox 部分工作。有什么方法可以在 Javascript/Jquery 中解决这个问题？

查看演示

更新：我想我得到了主要问题。主要问题是触摸事件（touchstart、touchend、touchmove）在 ​​IE 10 移动版中不起作用。我使用了IE 10 指针，这对我来说非常有用。感谢大家。

4

3 回答 3

2

虽然Translate3d并非所有浏览器都支持它，但它应该在 FF 中工作。Atm 它是唯一一个不带前缀支持它的浏览器。

IE10 不支持transform-stylewith preserve-3d，所以这对你来说可能是个问题。尽管如此，这里还是可以进行 3d 变换。

我建议您更改tranlate3d为，translateX因为无论如何您只修改该X值。这已经可以解决您的问题。同样，通常建议最后声明符合标准的值（前缀自由形式），因为这是首选表示法，并且没有一些专有的东西会覆盖它。

于 2013-04-24T10:34:59.053 回答
2

您绝对应该记住的一件事是您使用供应商特定前缀的顺序。说的有区别：

gallery.css("transition-duration", duration + "ms");
gallery.css("-webkit-transition-duration", duration + "ms");
gallery.css("-moz-transition-duration", duration + "ms");
gallery.css("-ms-transition-duration", duration + "ms");
gallery.css("-o-transition-duration", duration + "ms");

和...

gallery.css("-webkit-transition-duration", duration + "ms");
gallery.css("-moz-transition-duration", duration + "ms");
gallery.css("-ms-transition-duration", duration + "ms");
gallery.css("-o-transition-duration", duration + "ms");
gallery.css("transition-duration", duration + "ms");

正如这个 SO question的接受答案中所述：

哪个是最后一个-webkit-border-radius，border-radius将是使用的那个。

-webkit-border-radius是“实验性”属性 - 实现可能包含与规范的偏差。的实现border-radius将与规范中的内容相匹配。

最好在可用时使用“W3C 实现”，以确保所有支持它的浏览器之间的一致性。

话虽如此 - 请注意，您当前的实现可能会使用特定于供应商的实验属性覆盖“W3C 实现”版本。

关于您的问题的更具体的答案：

这张表可以让您更深入地了解哪些浏览器声称支持 3d 转换 CSS 的版本，从版本到版本。

  1. IE浏览器

    根据这篇博客文章，IE 10 支持完整的 CSS3 3D 转换（请注意，IE9仅支持2-D 转换，以前的版本甚至不支持）。

  2. 火狐

    在修复错误 505115时，Firefox 声称支持 CSS3 3D-Transforms。根据这个示例页面，Mozilla 确实支持转换（如果您在 Firefox 中加载该页面，甚至演示了这样做）。

    不幸的是，Firefox 中更复杂的测试失败了。有关在 Chrome 中优雅运行但在 FF 中不适用的示例，请参阅此链接。可以肯定的是，部分支持，但没有 WebKit 实现的动画。

    注意：我使用 Firefox 20.0.1 进行测试。

  3. 歌剧

    Opera 提供了这篇文章来描述他们对转换的支持。

最终结果：

主要浏览器正在支持，但速度很慢。未来的版本要求提供更全面的支持，但每个供应商似乎对“完整”的含义有不同的定义。所以 - 像在网络世界中一样...

于 2013-04-29T22:07:20.417 回答
1

有关 Internet Explorer 的特定详细信息，请查看有关与转换相关的级联样式表 (CSS) 功能的 MSDN 文档。

查看transform-style property，它似乎只支持transform-style: flat

变换函数部分列出了translate3d () 函数

本部分包含 Windows Internet Explorer 支持的级联样式表 (CSS) 转换函数的参考文档。Windows Internet Explorer 9 中添加了对 2-D 变换的支持，而 Internet Explorer 10 中添加了对 3-D 变换的支持。

于 2013-04-24T11:11:16.737 回答