4

我正在编写一个使用 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/

4

1 回答 1

0

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

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

-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。

希望有帮助:)

于 2013-09-16T22:16:41.463 回答