在Javascript中设置CSS 3过渡和转换在Chrome中工作，但在IE 10, FF中不正确

Setting CSS 3 Transition and Transform in Javascript works in Chrome But not in IE 10, FF properly?

本文关键字：但在 工作 不正确 FF Chrome IE 设置 Javascript CSS 转换      更新时间：2023-09-26

我有以下代码，

    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, android, Iphone上都很好用。但在ie10(在移动设备上)不工作，Firefox部分工作。有什么办法在Javascript/Jquery中解决这个问题吗?

参见演示

更新:我想我知道主要问题了。主要的问题是触摸事件(touchstart, touchend, touchmove)在ie10手机中不工作。我使用了IE 10指针，这对我来说很好。谢谢所有人。

您一定要记住的一件事是顺序使用特定于供应商的前缀。和是有区别的

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问题中提到的被接受的答案:

将使用-webkit-border-radius和border-radius中最后一个。

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

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

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

关于你的问题的更具体的答案:

这个表可以让你更深入地了解不同版本的浏览器支持3d转换CSS。

  1. Internet Explorer

    根据这篇博客文章，ie10支持完整的CSS3 3D转换(注意IE9只支持2d转换，以前的版本甚至不支持)。

    2. Firefox

  2. 修复Bug 505115后，Firefox宣布支持CSS3 3D-Transforms。根据这个示例页面，Mozilla也支持转换(甚至在Firefox中加载该页面时也演示了这样做)。

    不幸的是，在Firefox中更复杂的测试会失败。看看这个链接的例子，一些东西在Chrome中工作优雅，但不是在FF。部分支持，但没有WebKit实现的动画。

    注意:我使用Firefox 20.0.1来测试。

    3. 歌剧

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

结果:

支持正在进入主流浏览器，但速度很慢。未来的版本声称会提供更全面的支持，但每个供应商似乎对"全面"的含义有不同的定义。所以，在网络世界中，像往常一样……coder-beware……在多个环境中测试，看看实际上是如何工作的，然后再相信浏览器能够按照规范正常工作。

虽然Translate3d仍然不支持在所有浏览器中，它应该在FF中工作。目前，它是唯一一个支持无前缀的浏览器。

IE10不支持transform-style和preserve-3d，所以这可能是一个问题。然而，3d变换在这里是可能的。

我建议您将tranlate3d更改为translateX，因为无论如何您只修改X值。这可能已经解决了你的问题。此外，通常建议最后声明符合标准的值(前缀自由形式)，因为这是首选的表示法，而不是让一些专有的东西覆盖它。

有关Internet Explorer的具体细节，请参阅MSDN文档中有关层叠样式表(CSS)与转换相关的功能。

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

Transform Functions部分列出了一个translate3d()函数

本节包含有关级联样式的参考文档表格(CSS)转换Windows中支持的函数Internet Explorer。Windows中增加了对二维变换的支持Internet Explorer 9，同时增加了对3d转换的支持Internet Explorer 10.

相关文章：