记录的Firefox / jQuery的/ CSS动画的虫子在一起吗？ [英] Documented bugs of Firefox/jQuery/CSS animations together?
问题描述
我编码使用jQuery来切换CSS类，这些类运行CSS动画网站。
I'm coding a website that uses jquery to switch CSS classes, these classes run CSS animations.
在谷歌Chrome和Internet Explorer 9/10的一切完美的作品，在Firefox（极光24和Firefox 23）动画不执行，但其余的工作。
In Google Chrome and Internet Explorer 9/10 everything works perfectly, on Firefox (Aurora 24 and Firefox 23) animations are not performed, but the rest works.
因此，举例来说，如果我点击一个按钮，应该隐藏一个盒子，并显示一个又一个，在Chrome动画与平稳过渡进行，在Firefox。
So for example if I click a button which should hide a box and show another one, on Chrome the animation is performed with the smooth transition, on Firefox is performed without smooth transition.
但奇怪的是，如果我改变应由控制台动画，CSS的值时，动画作品。
The strange thing is that if I change the CSS value which should be animated, by console, the animation works.
该网站有大约10动画同时运行，但仅有5正常工作。结果
试图禁用最后一个（和较重）3动画fixs的问题。因此，也许它是一种超负荷无法正常火狐管理的...？
The site has about 10 animations that run simultaneously, but just 5 works properly.
Trying to disable the last (and heavier) 3 animations fixs the problem. So maybe it's a kind of overload not properly managed by Firefox...?
我不能提供的jsfiddle因为当我写一个它的工作原理，因此无法显示问题...
I can't provide a JSFiddle because when I write one it works and so is impossible to show the problem...
这是导致问题code部分：
This is the part of code that causes the problem:
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");
});
我知道是不容易的没有工作的例子就明白了。结果
在一些词语，由code的这一部分产生的动画是一种页面滑块，左或右（视在菜单对于新调用页的位置），和新的页面上的当前页的幻灯片载玻片在从相反方向上具有相同的时间。结果，
我使用这个插件： https://github.com/zachstronaut/jquery-css-transform动画在所有浏览器变换。
I know is not easy to understand without a working example.
In few words, the animation generated by this part of code is a kind of page slider, the current page slides on left or right (depending of the position in the menu respect to the new called page), and the new page slides at the same time from the opposite direction.
I use this plugin: https://github.com/zachstronaut/jquery-css-transform to animate transform on all browsers.
所以，我在这里只是问，如果有人知道一个Firefox的这种行为错误。
So I'm here just to ask if someone knows about a Firefox's bug with this behavior.
。
下面的页面的现场演示：
的http：//demo.mywebex$p$pssion.com/customers/pelplastic/
here a live demo of the page: http://demo.mywebexpression.com/customers/pelplastic/
这是一个有点马车，因为我已经与导出为网页另存为...，通过点击的方式在先点击我！菜单项，然后尝试之间切换两个点击ME 菜单项。
it's a bit buggy because I've exported it with the "Save page as...", by the way click on the FIRST CLICK ME!! menu entry, then try to switch between the two CLICK ME menu entries.
这小提琴向您显示Firefox的支持一事─prefixed版本，所以问题不在于供应商preFIX：
This Fiddle shows you that Firefox supports the not-prefixed version, so the problem is not the vendor-prefix:
推荐答案
我认为这个问题是你对CSS3规则 -webkit-等转换这只井盖的webkit的使用浏览器。
I believe the issue is your use of the CSS3 rule -webkit-tranform this only covers "webkit" browsers.
相反，你需要设置所有的浏览器特定的规则：
Instead you need to set all the browser specific rules:
-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
This site http://css3please.com/ will help a lot, it generates css3 with the browser specific names.
希望有所帮助：）
这篇关于记录的Firefox / jQuery的/ CSS动画的虫子在一起吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
