CSS 转换不会在没有 setTimeout 的情况下运行

我正在为iPhone创建一个HTML5应用程序，使用Sencha Touch 2在UIWebview中运行。

我创建了几种方法来帮助自己制作css动画。其中一个确实为我翻译了 Y 轴。我已经在我的CSS中设置了诸如-webkit-backface-visibility之类的东西，以帮助平滑动画。我尝试过webkit perspective和webkit preserve-3d，但它们似乎没有帮助。

无论如何，我已经将动画制作到非常流畅的程度。问题是，如果我同时翻译一大组元素，其中一个不会翻译。

假设我向上翻译 A、B、C、D、E 和 F。F 将直接跳到最后 - 没有翻译。这几乎就像在 -webkit-transition-duration 之前设置了 -webkit-transform，这不是我的代码中发生的事情。此外，A、B、C、D 和 E 动画完美无缺。

什至不确定这是否是我为一大组元素制作动画时独有的，但现在似乎就是这样。如果它发生在F身上，它将永远发生在F身上——所以它至少在这个意义上是一致的。

我甚至尝试通过动态创建一个具有等于转换和持续时间的新类样式的元素来修复它，将其嵌入到 DOM 中，然后将元素的类设置为等于样式的类。我遇到了同样的问题。

问题是，如果我在setTimeout函数中嵌入Animations.translateY的最后一行，即使是1毫秒的延迟，所有内容也将始终动画化。但是，这会导致屏幕在~33%的时间内闪烁，我猜这是由于设置超时太多？

至于浏览器的一致性，我看到我的PC上的chrome和iPhone设备上的UIWebview都缺少动画（没有setTimeout）。我只在iPhone设备上看到闪烁（使用setTimeout）。

Animations.translateY = function(element, measurement, duration, callback, easing)
{
    Animations.setAnimationCallback(element,callback)
    var css = "translate3d(0,"+measurement+",0)"; 
duration = parseFloat(duration);
element.style['-webkit-transition-duration'] = duration + 's';
    element.style['-webkit-transform'] = css
}

动画回调代码..我觉得这无关紧要，因为回调实际上永远不会触发（取 0 的动画不会触发回调）

Animations.setAnimationCallback = function(element, callback)
{
    //set callback handler
    element.addEventListener('webkitTransitionEnd', 
            function(){
                //set animation duration back to 0
                this.style['-webkit-transition-duration'] = "0s";
                if(callback != null)
                {
                    callback();
                }
                this.removeEventListener('webkitTransitionEnd', arguments.callee, null);
            });
}