一起记录 Firefox/jQuery/CSS 动画的错误？

Question

我正在编写一个使用 jquery 切换 CSS 类的网站，这些类运行 CSS 动画。

在 Google Chrome 和 Internet Explorer 9/10 中一切正常，在 Firefox（Aurora 24 和 Firefox 23）上不执行动画，但其余部分正常。

因此，例如，如果我单击一个应该隐藏一个框并显示另一个框的按钮，则在 Chrome 上执行动画时平滑过渡，在 Firefox 上执行时不平滑过渡。

奇怪的是，如果我通过控制台更改应该动画的 CSS 值，动画就会起作用。

该网站有大约 10 个动画同时运行，但只有 5 个可以正常运行。
尝试禁用最后一个（和更重的）3 个动画可以解决问题。所以也许这是 Firefox 没有妥善管理的一种过载...？

我无法提供 JSFiddle，因为当我编写一个 JSFiddle 时它可以工作，因此无法显示问题...

这是导致问题的代码部分：

console.log("3D Accelerated animation");        

console.log("oldpage = "+oldpage+"\npage = "+page+"\nnewpage = "+newpage);

if(oldpage != newpage) eoldpage.removeClass("active"); 
$(".slider > li").attr("style", "").removeClass("animation");

epage.css({"transform": "translate3d(0, 0, 0)"});

enewpage
.css({"transform": "translate3d(" + pagew * db + "px, 0, 0)"})
.addClass("active");

eboth.addClass("animation");

enewpage.children("section").load('/pages/' + newpage + ".php?lang=" + lang, function() {

    var hmorpher = enewpage.children().height();
    $("#heightmorpher").css({"height": hmorpher});
    $(".parallax").css({"height": Math.pow(hmorpher + 200, 600)});

    epage.css({"transform": "translate3d(" + (pagew * da * 2) +"px, 0px, 0px)"});
    enewpage.css({"transform": "translate3d(0px, 0px, 0px)"});


    $("body").removeClass("active");

});

我知道没有工作示例就不容易理解。
总之，这部分代码生成的动画是一种页面滑块，当前页面向左或向右滑动（取决于菜单中相对于新调用页面的位置），新页面在同时从相反的方向。
我使用这个插件：https://github.com/zachstronaut/jquery-css-transform 在所有浏览器上进行动画转换。

所以我在这里只是想问问是否有人知道 Firefox 的这种行为的错误。

。

编辑：

这里是页面的现场演示： http://demo.mywebexpression.com/customers/pelplastic/

有点问题，因为我用“将页面另存为...”导出它，顺便点击FIRST CLICK ME!!菜单项，然后尝试在两者之间切换两个 CLICK ME 菜单项。

谁谈论供应商前缀：

这个 Fiddle 告诉你 Firefox 支持无前缀版本，所以问题不在于供应商前缀：

http://jsfiddle.net/3wM2V/1/

Answer 1

我认为问题在于您使用 CSS3 规则 -webkit-tranform 这仅涵盖“webkit”浏览器。

相反，您需要设置所有浏览器特定规则：

-webkit-transform: translate3d(0px, 0px, 0px);  /* Chrome, Safari 3.1+ */
-moz-transform:    translate3d(0px, 0px, 0px);  /* Firefox 3.5-15 */
-ms-transform:     translate3d(0px, 0px, 0px);  /* IE 9 */
-o-transform:      translate3d(0px, 0px, 0px);  /* Opera 10.50-12.00 */ 
transform:         translate3d(0px, 0px, 0px);  /* Firefox 16+, IE 10+, Opera 12.10+ */

此站点http://css3please.com/ 将有很大帮助，它会生成带有浏览器特定名称的 css3。

希望有帮助:)