如何在iPhone上使高度（和其他尺寸）的css3过渡更平滑？

Question

我试图创建一个简单的幻灯片，从屏幕底部滑入并覆盖视口。然后我通过AJAX将内容加载到该面板中。

我将面板元素设置为高度：0并将其绝对定位在视口底部并应用了css3过渡，我将高度设置为视口的高度，从而触发动画。

不幸的是，动画非常缓慢且滞后到非常不可接受的程度。

我正在将以下CSS应用于面板：

-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease-in-out;
-webkit-transition-property: height;

内容量似乎有影响。或许这是内容的类型？我不确定。虽然我错了，但我认为AJAX没有引起问题。

有什么想法吗？

干杯。

Answer 1

这种迟缓肯定与浏览器必须重新包装文本以适应新的高度这一事实有关。尝试动画位置或平移，而不是高度。

这是一个快速原型： http://jsfiddle.net/6gdGr/

您可能会遇到闪烁的幻灯片问题，您可以轻松找到stackoverflow中的答案，其中包括1.隐藏背面可见性或2.使用-webkit-translate3d，具体取决于上下文。