Javascript 可扩展无序列表动画，渲染问题

我正在尝试为可展开列表设置动画，但在正确显示列表时遇到问题。 无动画效果列表显示正确（展开/折叠）。要折叠列表，我使用的是

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
的扩展而变化？间隔结束时，它不能正确显示的原因是，在间隔运行第一个间隔之前，您将“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);

您是否检查了调试器以查看ul.offsetHeight的值？我的猜测是，这是零，或者至少，不是你所期望的，这就是为什么它不能正常工作。尝试将var
替换为=ul.offsetHeight与
var to=100，只是想看看它是否有效。”克雷格检查，
ul.offsetHeight正在返回正确的值。