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

Question

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

我将面板元素设置为 height: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，具体取决于上下文。