3

展開可能なリストをアニメーション化しようとしていますが、リストを正しく表示するのに問題があります。アニメーション効果リストが正しく表示されていない (展開/折りたたみ)。リストを折りたたむには、 を使用してul.style.visibility = "hidden"; ul.style.height = "0px";います。アニメーション効果なしで、見栄えが良ければリスト:

正しく表示された順序なしリスト.

黒い枠は 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現在展開されている順序付けられていないリストの要素への参照です。

しかし、このコードを使用して展開動作をアニメーション化した後、外側ul要素の幅は内側要素の展開によって変化しませんul。ただし、アニメーションは正常に機能していますが、リストは次のようになっています。

順序付けられていないリストが正しく表示されない

//ul.style.height = (from+step*(to-from))+"px";からコメントアウトするとsetInterval、リストが正しく表示されます（ただし、アニメーション効果はありません）。

エラーを指摘していただけますか、なぜ外側の幅がul内側の拡張で変化しないのですかul

4

1 に答える 1

2

間隔が終了したときに正しく表示されない理由は、間隔が最初の間隔を実行する前に ul.style.height に「auto」を割り当てているためです。間隔が終了したら、これを行う必要があります。

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-16T12:43:24.670 に答える