Jquery Firefox正在忽略转换/跳过转换样式更改
当我为固定层设置动画时Jquery Firefox正在忽略转换/跳过转换样式更改,jquery,css,performance,firefox,animation,Jquery,Css,Performance,Firefox,Animation,当我为固定层设置动画时 $('#block1').click(function() { $('#block1').stop().animate({ translateY: -$(window).width() }, { duration: 600, step: function(now, fx) { moveTo(this, now, 0); moveTo($('#block2')[0
$('#block1').click(function() {
$('#block1').stop().animate({
translateY: -$(window).width()
}, {
duration: 600,
step: function(now, fx) {
moveTo(this, now, 0);
moveTo($('#block2')[0], now, 0);
}
});
});
$('#block2').click(function() {
$('#block1').stop().animate({
translateY: 0
}, {
duration: 600,
step: function(now, fx) {
moveTo(this, now, 0);
moveTo($('#block2')[0], now, 0);
}
});
});
function moveTo(elem, x, y) {
elem.style['WebkitTransform'] = 'translate('+x+'px, '+y+'px)';
elem.style['transform'] = 'translate('+x+'px, '+y+'px)';
}
我做了一把小提琴来说明问题:
这里有一个屏幕截图@30fps:
在FF 19.0中,当我点击“布拉布拉…”时,动画看起来不错
但当我点击绿色矩形时,有时/之后只有绿色矩形是动画,而文本显示延迟而没有动画
在大屏幕/框架尺寸和windows 7的FF 19.0中测试
css看起来像:
body {
background: url(http://whiteboard.is/img/dot-pattern.png), #cccccc;
}
#block1 {
width: 100%;
height: 120%;
position: fixed;
}
h1, h2 {
display: inline-block;
line-height: 1;
text-transform: uppercase;
background: #ffffff;
font-weight: 900;
padding: 0.1em 0.2em;
position: relative;
margin: 0 0 10px 0;
color: #3a3d30;
font-size: 2em;
z-index: 5;
-moz-box-shadow: 0px 0px 18px 5px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0px 0px 18px 5px rgba(0, 0, 0, 0.4);
box-shadow: 0px 0px 18px 5px rgba(0, 0, 0, 0.4);
}
.child1 {
width: 600px;
left: 50%;
text-align: center;
position: absolute;
margin-left: -300px;
margin-top: 80px;
z-index: 9;
-webkit-transform: translate3d(0, 0, 0);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-transform: translate3d(0, 0, 0);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
-moz-perspective: 1000;
transform: translate3d(0, 0, 0);
transform-style: preserve-3d;
backface-visibility: hidden;
perspective: 1000;
}
#block2 {
width: 600px;
height: 400px;
position: fixed;
left: 150%;
margin-left: -300px;
background: #009900;
z-index: 20;
}
是的,请在此处添加代码。可能Firefox不识别
translateY
样式,只识别translate(x,y)
。您是否考虑过只修改左侧的
?我正在firefox中进行测试,但似乎无法重现您的问题。文本和绿色框似乎每次都会设置动画。我添加了视频:@Blazemonger:its仅用于jquery内部,因为jquery无法设置变换动画。因此,我使用步骤回调来修改转换