javascript - 如果没有 setTimeout，css 转换将无法运行

Question

我正在为 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-transform 在 -webkit-transition-duration 之前设置的一样，这不是我的代码中发生的事情。此外，A、B、C、D 和 E 动画完美。

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

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

问题是，如果我将 Animations.translateY 的最后一行嵌入到 setTimeout 函数中，即使有 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);
            });
}

Answer 1

它似乎适用于此:http://jsfiddle.net/cuzzea/9WGGf/我刚刚更改了您的功能:

 "translate3d(0,"+measurement+",0)"

到

 "translate3d(0,"+measurement+"px,0)"

没有 measurement("px") 它是行不通的。