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

Question

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

在谷歌浏览器和Internet Explorer 9/10中，一切都运行良好，在Firefox（Aurora 24和Firefox 23）上不会执行动画，但其余的都可以使用。

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

奇怪的是，如果我通过控制台更改应该设置动画的CSS值，则动画可以正常工作。

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

我不能提供一个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/

这有点儿马车，因为我用“保存页面...”导出它，顺便点击第一次点击我！ 菜单项，然后尝试在两个CLICK ME菜单项之间切换。

谁讨论供应商前缀：

这个小提琴向您显示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。

希望有帮助:)