mat*_*ler 18 jquery animation css3
所有,
我正在开发专门针对iPad的网络应用程序,我正在使用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加速.(它是否正确？)
提前谢谢了!
[UPDATE]
关于"闪烁",我有点模棱两可.简而言之 - 我一直在尝试各种各样的CSS3过渡(特别是在iPad上),并且始终如一 - 我注意到在过渡的开始或结束时有明显的闪烁.
换句话说,转换本身非常顺利.但是,根据精确设置,在转换开始或结束之前会有明显的闪烁.
这是另一个例子:我有三张照片(PNG)堆叠在一起.
底部PNG的不透明度= 1.0,顶部2的不透明度= 0.0.使用-webkit-keyframes,当照片淡入和淡出时,我能够获得丝般平滑的过渡.当动画结束时,底部照片以opacity = 1.0结束,前两个以opacity = 0.0结束.(这应该是他们的最终状态).
然而,正如动画结束一样,底部照片闪烁.就像浏览器强制重绘/重绘屏幕一样,这需要几分之一秒.
破坏效果已经足够糟糕,然后渲染转换不可用.(在我的iMac上它几乎,但不是很难以察觉.在iPad上,这是不容错过的).
Bob*_*ork 33
我正在处理同样的问题,我在SO上找到了解决方案:iPhone WebKit CSS动画导致闪烁
它就像添加一样简单
-webkit-backface-visibility: hidden;
可能
-webkit-perspective: 1000;
到每个动画对象.它对我有用,希望这对你也有帮助
我们通过修复视口解决了许多闪烁和字体问题.
以前我们有内容离开页面(滑动div),当视口没有修复时,设备似乎陷入了混乱,不得不结合显示内容的缩放功能处理屏幕上的数据.
头上的这个标签解决了我们的问题.
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
所有,
我不积极,这是答案(尤其是因为闪烁本身似乎有点不可预知的),但有传言称,这似乎摆脱它......
无论如何,这就是我在做的事情:
.mover {
-webkit-transition:all 0.4s ease-in-out;
}
var s = "translate3d(" + newPosition + "px, 0, 0)";
$('.mover ').css('-webkit-transform', s);
通常,第一次执行此操作时,我会在动画开始前看到闪烁.后续调用将平滑动画.
我推断的是,如果在调用动画之前没有设置3d坐标,你会看到一个闪烁.第一个调用设置这些坐标,因此后续调用将平滑动画.
所以 - 在尝试任何动画之前,我首先尝试设置div的3d坐标(基本上,当我第一次构建屏幕时 - 即初始化).
因此,此后 - 当调用3d动画时,div /元素的起始3d坐标已经建立.
这似乎消除了闪烁.
正如我所说 - 我不确定这是否是一个强大,可靠的解决方案,但它肯定已经消除了我当前项目中的问题.
祝好运.