我遇到一个特殊的问题，即某些HTML的渲染会被CSS3 transform3d动画延迟。这种情况发生在我测试的所有浏览器上（Android 4.1 webview，iOS 7，Chrome for Mac，Safari for Mac）。
我有<ul>作为我的网页的容器。每个li代表一个页面。 overflow属性设置为hidden，因此您一次只能看到一个页面。
当我想要转换到新页面时，我将tranform3d设置为正确的值，并且与transition-duration属性一起，它将新页面滑动到视图中。有趣的是，新的页面在转换完成之前没有呈现（因此它在白页中滑动，当动画完成时，显示视图）。
我可以看到html是在转换之前插入的，所以它似乎是在转换完成之前推迟了新<li>元素的呈现。
我在插入新的<li>元素后尝试更新transform3d属性200ms，当我这样做时，视图会在动画的中途呈现。
如果我删除transition-duration属性，当然没有动画，但<li>元素会立即呈现。
我能解决这个问题吗？有没有人经历过类似的事情？
答案 0 :(得分：1)
你的问题是你也在为-webkit-transform同时设置宽度动画，所以最后<li>将换行到下一行，直到宽度达到最终值（这将发生在过渡结束）。如果我将CSS更改为：
-webkit-transition: -webkit-transform 300ms;
-webkit-transition-timing-function: ease-in-out;
然后它正常工作。这是一个例子：
（这与React无关。）