javascript - 如何在 iPhone 上使 css3 的高度(和其他尺寸)过渡更平滑？

Question

我正在尝试创建一个简单的滑动面板，它从屏幕底部滑入并覆盖视口(viewport)。然后我通过 AJAX 将内容加载到该面板。

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

不幸的是，动画真的很慢而且滞后，以至于令人无法接受。

我正在将以下 CSS 应用到面板:

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

内容的数量似乎有影响。或者可能是内容的类型？我不知道。我不认为 AJAX 正在引起问题，尽管我可能是错的。

有什么想法吗？

干杯。

Answer 1

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

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

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