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

我甚至不确定这是否是我在动画大量元素时所独有的，但这似乎就是现在的情况。如果它发生在F上，它将永远发生在F - 所以它在这个意义上至少是一致的。

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

问题是，如果我在setTimeout函数中嵌入 Animations.translateY 的最后一行，即使延迟1毫秒，一切都将始终生成动画。然而，这会导致屏幕闪烁〜33％的时间，我猜这是因为setTimeouts太多了？

至于浏览器的一致性，我发现我的电脑上的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)"

没有测量（“px”）它没有用。

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

1 个答案: