CSS变换不使用setTimeout就无法运行。

Question

我正在使用Sencha Touch 2创建一个HTML5应用程序，以在iPhone上运行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的动画表现完美。

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

问题在于，如果我在setTimeout函数中嵌入Animations.translateY的最后一行，即使延迟1毫秒，所有内容也都会动画化。然而，这会导致屏幕33%左右的时间闪烁严重，我猜这是由于setTimeout太多？

至于浏览器的一致性，在我的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);
            });
}

- marklar

---

不是真正的解决方案，但你可以尝试使用双缓冲，看看是否能消除闪烁。 - Cavyn VonDeylen

这是一个很酷的想法，但我没有使用Canvas，我只是在DOM中进行动画。如果我尝试复制那个线程所做的事情，但是针对DOM，我担心会使DOM膨胀并导致动画卡顿。 - marklar

无论是A、B等的顺序如何，它总是“F”吗？还是总是第六个有问题，或者总是最后一个有问题？ - Erik Eidt

另外，你尝试过在一对.style[]属性更新周围放置display：“none”/display：“”（或visibility：“hidden”/“”）吗？有时我发现，在进行某些更改之前将它们隐藏然后再显示，或者将它们全部隐藏，然后进行所有更改，然后再全部显示它们会有所帮助。还有一个想法，有时候先进行一类所有更改，然后再进行另一类所有更改会有所帮助，例如先设置所有.style[-duration]，然后再设置所有.style[-transform]。这只是一些想法... - Erik Eidt

它在哪一个元素上发生是相当一致的，但阈值何时引起闪烁并不清楚，因为有时只有几个元素会导致闪烁，而其他时候则需要10个。至于您的第二个建议，它是一个好建议--它可以避免回流，对吗？这只会导致代码的大量重写，并且可能有些奇怪，因为所有动画都需要在任何一个运行之前设置，而不是逐个设置。 - marklar

Answer 1

似乎这个可以在这里工作：http://jsfiddle.net/cuzzea/9WGGf/。我只是修改了你的函数：

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

为了

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

如果不加上度量单位（"px"），它将不能正常工作。

- cuzzea

---

谢谢，但我实际上将函数保留为这样，以便除了像素之外，还可以使用其他测量单位，例如％和em。请记住，在这里问题不是它不起作用-在一些同时触发的动画后，性能存在问题。 - marklar