jquery – CSS3 transition/transform/translate3d会导致转换的第一个或最后一个“框架”(在iPad上)的严重闪烁,

所有，

我正在使用专门针对iPad的网络应用程序，而我正在使用CSS3转换来动画化div(从左到右移动)。

我的班级看起来像这样：

.mover {
    -webkit-transition:all 0.4s ease-in-out;
}

当用户点击按钮时，我这样做：

var s = "translate3d(" + newPosition + "px,0)";
$('.mover ').css('-webkit-transform',s);

这非常有用，除非用户触发过渡的第一时间;第一次有一个非常明显的闪烁。

我意识到我不需要使用translate3d，因为我只是左右移动div，但据我所知，这迫使iPad使用GPU加速。 (它是否正确？)

提前谢谢了！

[updatE]

我对“闪烁”有些含糊不清。简而言之，我一直在尝试各种各样的CSS3转换(特别是在iPad上)，并且始终如一 – 我注意到在转换开始或结束时闪烁着明显的闪烁。

换句话说，过渡本身非常流畅。然而，根据精确的设置，在转换开始或结束之前，会有明显的闪烁。

这是另一个例子：我有三张照片(PNG)叠在一起。

底部PNG的opacity = 1.0，顶部2的opacity = 0.0。使用-webkit关键帧，当照片淡入淡出时，我可以获得柔滑的平滑过渡。当动画结束时，底部照片以opacity = 1.0结束，opacity = 0.0的前两个。 (这应该是他们的最终状态)。

然而，就像动画结束一样，底部的照片闪烁。就像浏览器是强制重画/重绘屏幕一样，这需要几分之一秒。

破坏效果是不好的，渲染然后转换不能使用。 (在我的iMac上，几乎是不可思议的，在iPad上，这是不可错过的)。

-webkit-BACkface-visibility: hidden;

-webkit-perspective: 1000;