全,
我正在开发一个专门用于iPad的web应用程序,并且我正在使用CSS3过渡来设置div的动画(将其从左向右移动)。
我的类看起来像这样:
.mover {
-webkit-transition:all 0.4s ease-in-out;
}
当用户单击一个按钮时,我这样做:
var s = "translate3d(" + newPosition + "px, 0, 0)";
$('.mover ').css('-webkit-transform', s);
除了用户触发转换的第一次时间之外,它的效果很好;第一次,有一个非常明显的闪烁。
我意识到我不需要使用translate3d,因为我只需要左右移动div,但据我所知,这会迫使iPad使用GPU加速。(这样做正确吗?)
首先要感谢大家!
更新
我对“闪烁”一词有点模棱两可。简而言之,我一直在试验各种各样的CSS3转换(特别是在iPad上),并且一直都注意到在转换的start或end上有一个明显的闪烁。
换句话说,转换本身是非常平滑的。然而,根据精确的设置,在过渡开始或结束之前会有一个明显的闪烁。
这是另一个例子:我有三张照片(PNG)堆叠在一起。
最下面的PNG有opacity=1.0,最上面的2有opacity=0.0。使用-webkit-keyframe,我可以在照片淡入淡出时获得平滑的过渡效果。当动画结束时,底部的照片结束于opacity=1.0,顶部的两个结束于opacity=0.0。(这应该是它们的最终状态)。
然而,就在动画结束时,底部的照片闪烁。这就好像浏览器被强制重新绘制/重新绘制屏幕一样,这只需要几秒钟的时间。
这已经够糟糕的了,破坏了效果,并使过渡变得不可用。(在我的iMac上,它几乎是不可察觉的,但也不完全是。在iPad上,它是不容错过的)。
https://stackoverflow.com/questions/5814101
复制相似问题