Javascript HTML不是'；t在translate3d转换之前和之后渲染

我遇到了一个特殊的问题，一些HTML的渲染被CSS3 transform3d动画延迟。我测试过的所有浏览器（Android 4.1 webview、iOS 7、Chrome for Mac、Safari for Mac）都会出现这种情况

我有一个

作为我的页面的容器。每个

li

代表一个页面。overflow属性设置为hidden，因此一次只能看到一页

当我想转换到一个新页面时，我将tranform3d设置为正确的值，并与transition duration属性一起将新页面滑动到视图中。有趣的是，在转换完成之前，新页面不会被渲染（因此它会在白色页面中滑动，当动画完成时，会显示视图）

我可以看到html是在转换之前插入的，因此它似乎将新

元素的呈现延迟到转换完成之后

在插入新的

元素200毫秒后，我还尝试更新transform3d属性，当我这样做时，视图会在动画进行到一半时渲染

如果删除transition duration属性，当然没有动画，但是

元素会立即渲染

我能解决这个问题吗？有没有人经历过类似的事情

---

示例代码：

您的问题是，在-webkit变换的同时还设置了宽度的动画，因此最后一个

将换行到下一行，直到宽度达到其最终值（这将在转换结束时发生）。如果我将CSS更改为：

-webkit-transition: -webkit-transform 300ms;
-webkit-transition-timing-function: ease-in-out;

然后它就正常工作了。下面是一个例子：

---

（这与反应无关。）

您需要向我们展示一个演示和一些代码，以便我们能够提供帮助。好的，今晚晚些时候我将尝试在JSFIDLE中重新创建问题，并更新我的帖子。@Zachsauier:我已经复制了问题。问题底部的链接。你是对的，React代码有点有趣。。。如果您在点击按钮时注释掉

translate3d

，并在上面的行中添加逗号，您可以看到ul的宽度确实在扩大，但其他元素仍然隐藏。这可能与React处理动画本身的方式有关，我会在任何论坛或bug请求上发布