3

我正在为 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% 的时间里闪烁，我猜这是因为 setTimeouts 太多？

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

1 回答 1

5

它似乎在这个工作：http: //jsfiddle.net/cuzzea/9WGGf/我刚刚改变了你的功能：

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

至

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

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

于 2012-08-26T07:49:05.360 回答