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/

这有点儿马车，因为我已经将“保存页面为......”导出，顺便点击 FIRST 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。

希望有所帮助：）

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

编辑：

谁在谈论供应商前缀：

1 个答案: