CSS变换将不会运行没有setTimeout的

我创建一个HTML5的iPhone应用程序使用煎茶触摸2.CSS变换将不会运行没有setTimeout的

我已经创建了几个方法来帮助自己CSS动画在一个UIWebView运行。其中一个确实为我翻译Y轴。我在我的CSS中设置了诸如-webkit-backface-visibility之类的内容，以帮助平滑动画。我试过webkit透视图和webkit preserve-3d，但他们似乎没有帮助。

无论如何，我已经获得了动画到一个非常平滑的点。问题是，如果我同时翻译大量元素，其中一个元素不会翻译。

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

我甚至不确定这是否仅限于当我为一大群元素设置动画时，但似乎是现在它是如何发生的。如果它发生在F上，它总是会发生在F上 - 所以它在这个意义上至少是一致的。

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

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

来源

2012-08-17 marklar

不是一个真正的解决方案，但你可以尝试[双缓冲（http://stackoverflow.com/questions/2795269/does-html5-canvas-support-double-buffering），看看它消除了闪烁。 – 2012-08-21 18:08:40

这是一个很酷的想法，但我不使用Canvas，我在DOM只是动画。如果我试图复制什么线程正在做什么，但对于DOM，我担心会臃肿的DOM，并导致波涛汹涌的动画 – marklar 2012-08-22 04:44:47

是否总是“F”不管顺序（A之间，B ...），或总是第六个，或总是最后一个有问题？ – 2012-08-24 22:07:12

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

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

到

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

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

来源

2012-08-26 07:49:05 cuzzea

谢谢，但我实际上离开了这样的功能，所以除像素外，还可以使用其他度量单位，例如％和em。请记住，问题不在于它不起作用 - 这是因为在几个动画同时触发后，存在性能问题。 – marklar 2012-08-30 21:31:31

CSS变换将不会运行没有setTimeout的

回答

相关问题