2011-03-13 94 views
0

我使用YUI-2製作了一個應用程序,它使用YUI動畫模塊中的不同效果。我創建了一個如下所示的表單:http://tympanus.net/Tutorials/FancySlidingForm/
在應用程序YAHOO.util.Scroll()用於創建動畫效果。在Firefox和IE瀏覽器中運行緩慢的YUI動畫

var myAnim1 = new YAHOO.util.Scroll('container1', { 
left: {  
    to: 500 
} 
},1,YAHOO.util.Easing.easeOut); 
myAnim1.animate(); 

上述代碼在Chrome中運行良好,但動畫在Firfox和Internet Explorer中運行緩慢。 任何人都可以建議我什麼可能導致代碼在這些瀏覽器中運行緩慢的問題?

回答

0

緩慢動畫的常見原因是瀏覽器渲染引擎的速度。

根據您的動畫效果以及它如何影響HTML頁面的渲染部分,瀏覽器被迫重新呈現動畫每一步的頁面。

IE在這方面通常很差,firefox通常相當不錯,但是在某些佈局方面存在問題。 Chrome幾乎總是非常擅長這一點,因此你很少在那裏看到問題。

+0

我已經創建了3個表單(每個表單少於3個字段)並將其設置爲如下形式:http://tympanus.net/Tutorials/FancySlidingForm/ – Vin 2011-03-13 01:58:24

+0

是的,它看起來像一個重新渲染問題。分析js顯示的活動和時間非常少。 (當經歷從帳戶到confim的所有動畫步驟時,我的機器上的aroudn 3300函數調用和43ms花費在firefox 3.6中) – 2011-03-13 02:04:57

+0

通常情況下,您有更多的DOM元素用於生成動畫。佈局/ css的風格也可能是一個因素 - 絕對定位的元素更容易生成動畫,因爲渲染引擎比動態寬度表更容易解析元素。浮游物也相當沉重,並且像塌陷的邊緣。 – 2011-03-13 02:08:24

相關問題