javascript - 可展开的无序列表动画，渲染问题

Question

我正在尝试为可扩展列表设置动画，但无法正确显示列表。没有正确显示动画效果列表(展开/折叠)。要折叠列表，我正在使用 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 元素的展开而改变。然而动画工作正常，但列表看起来像这样:

当我从 setInterval 注释掉 //ul.style.height = (from+step*(to-from))+"px"; 时，列表是正确显示(但没有动画效果)。

能否请您指出错误，为什么外部 ul 的宽度不随内部 ul 的扩展而变化

Answer 1

间隔结束时它无法正确显示的原因是因为您在间隔甚至运行其第一个间隔之前将“auto”分配给 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);