可擴展的無序列表動畫，渲染問題

我想動畫可擴展列表，但在正確顯示列表時遇到了問題。沒有動畫效果列表正在正確顯示（展開/摺疊）。要摺疊列表，我正在使用ul.style.visibility = "hidden"; ul.style.height = "0px";。沒有動畫效果，列表如果看起來不錯：可擴展的無序列表動畫，渲染問題

Correctly displayed unordered list 。

黑色邊框位於UL元素上。我使用下面的JavaScript代碼，展開列表：

var from = 0; //The height 
ul.style.height = "auto"; //set height to auto to get actual height 
var to = ul.offsetHeight; //get height 
ul.style.height = "0px"; 
ul.style.visibility = "visible"; 
ul.style.overflow = "hidden"; 

var start = new Date().getTime(), 
    timer = setInterval(function() { 
     var step = Math.min(1,(new Date().getTime()-start)/400); 
     ul.style.height = (from+step*(to-from))+"px"; 
     if(step == 1) clearInterval(timer); 
    },20); 
//Expand List 
ul.style.overflow = "inherit"; 
ul.style.height = "auto"; 
ul.style.visibility = "inherit";

ul中的代碼參照無序列表ul元素目前正在擴大。

但是在使用此代碼動畫展開行爲後，外部元素的寬度不會隨着內部元素的展開而改變。但是動畫工作正常，但列表看起來像這樣：

Incorrectly displayed unordered list

當我//ul.style.height = (from+step*(to-from))+"px";從setInterval註釋掉，被正確顯示的列表（然而，沒有動畫效果）。

能否請您指出的錯誤，爲什麼不是外ul寬度與擴大的內ul

來源

2013-08-16 Harshveer Singh

您是否檢查了調試器以查看ul.offsetHeight的值是什麼？我的猜測是，這是零或至少，不是你所期望的，這就是爲什麼它不能正常工作。嘗試用'var to = 100;'替換var'to = ul.offsetHeight;'，看看它是否有效。 – Craig

@Craig Checked，'ul.offsetHeight;'返回正確的值。 –

當間隔完成它不能正確顯示的原因是不斷變化的，因爲你要分配「自動」 UL .style.height在間隔之前甚至已經運行了第一個間隔。間隔結束時應該這樣做：

timer = setInterval(function() { 
    var step = Math.min(1,(new Date().getTime()-start)/400); 
    if (1 === step) { 
     ul.style.height = "auto"; 
     clearInterval(timer); 
    } else { 
     ul.style.height = (from+step*(to-from))+"px"; 
    } 
},20);

來源

2013-08-16 12:43:24 Craig

你說得對，這是問題，謝謝。 –

可擴展的無序列表動畫，渲染問題

回答

相關問題