Javascript 一起记录Firefox/jQuery/CSS动画的bug？

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

在GoogleChrome和InternetExplorer9/10中，一切都能完美运行，在Firefox（Aurora24和Firefox23）上，动画不会执行，但其余的都可以

例如，如果我点击一个按钮，该按钮应该隐藏一个框并显示另一个框，那么在Chrome上，动画是通过平滑过渡执行的，在Firefox上，动画是不通过平滑过渡执行的

奇怪的是，如果我通过控制台更改了应该设置动画的CSS值，动画就会工作

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

我不能提供JSFIDLE，因为当我编写一个JSFIDLE时，它可以工作，因此不可能显示问题

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

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");

});

我知道如果没有一个有效的例子是不容易理解的。
简而言之，这部分代码生成的动画是一种页面滑块，当前页面向左或向右滑动（取决于菜单中相对于新调用页面的位置），新页面同时从相反方向滑动。
我使用这个插件：在所有浏览器上设置变换动画

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

编辑： 以下是该页面的现场演示：

这有点问题，因为我用“另存页面为…”导出了它，顺便说一下，单击第一次单击我菜单项，然后尝试在两个单击我菜单项之间切换

对于谈论供应商前缀的人： 这把小提琴向您展示了Firefox支持无前缀版本，因此问题不在于供应商前缀：

---

我认为问题在于您对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+ */

这个网站会有很大帮助，它会用特定于浏览器的名称生成css3

---

希望这有帮助：）

你能在web服务器上的某个地方放置一个不起作用的页面的示例，或者将HTML、JS和CSS粘贴到单独的代码框中吗？谢谢，刚才添加的当我单击你在该页面上描述的内容时，我甚至看不到你描述的部分动画。与其把“有点问题”的东西放在外面，不如把不起作用的东西的完整例子放出来。如果“将页面另存为…”导致出现错误，则不要使用该功能。只需单击第一个按钮“单击我”！！！选项卡，然后使用两个“单击我”选项卡，它在Chrome和Explorer 10中工作，但在Firefox中，页面幻灯片动画只工作了一半，而您提供的链接正在重定向到。该页上没有选项卡；只有一个列表显示未设置样式的链接。在观察到错误行为之前，您可能需要清除缓存并纠正问题。不，我说过，如果我在调试控制台中更改值，动画将被执行，Firefox也支持无前缀的转换，而且我使用的是jQuery插件（我在问题中已经说过）这会自动在需要的地方添加供应商前缀。嗨，如果我在您链接的演示站点上将值从

-webkit transform

更改为

-moz transform

，它在Firefox中工作。因此，我的建议是，你的插件似乎没有添加正确的规则。你在哪里添加了

-moz转换

？在我的CSS中，

转换属性中只有一个
-webkit转换
，我还添加了-
moz-transform
，但它不起作用。在
ul.slider li
上，我只是用正确的
-moz
前缀规则替换了当前存在的
-webkit-transform
。
转换属性：-moz-transform，transform，left？它不起作用。Firefox23支持无前缀版本。顺便说一句，如果问题是这样的话，在调试控制台中编辑这些值是不起作用的。