Javascript CSS转换在参数化函数中不起作用

因此，我获得了以下代码来创建一个简单的固定红框：

var red_box = document.createElement('div');
    red_box.id = 'caixa_apresentacao_texto';
    red_box.style.width = "40%";
    red_box.style.overflow = "hidden";
    red_box.style.backgroundColor = "white";
    red_box.style.color = "black";
    red_box.style.border = "5px double red";

    /* Centralizing */
    red_box.style.position = "fixed";
    red_box.style.left = "50%";
    red_box.style.marginLeft = "-20%";      //Por que a largura é 40%...

    red_box.style.transition = "max-height 1s";
    red_box.style.display = "none";
    red_box.style.zIndex = "99999999999999";
    red_box.style.marginTop = "50px";
    red_box.style.maxHeight = "0px";

   document.documentElement.insertBefore(red_box,document.body);

所以，我的想法是，当我将一些文本传递给这个框时，它会慢慢放大以显示它。我通过以下代码获得此行为：

var timerHeight;

function expandBox(text){
    clearInterval(timerHeight);

    /* if the box is empty...*/
    if(document.querySelector("#red_box").style.maxHeight == "0px"){   

        document.querySelector("#red_box").style.display = "inline-block";
        red_box.innerHTML = text;

        /* Call a function that enlarge the maxHeight property , theorically with the transition letting it more beautiful */
        var someText = "text";
        timerHeight= setTimeout(enlargeBoxHeight(someText),1);
    }
}

function enlargeBoxHeight(anyText){
    document.querySelector("#red_box").style.maxHeight ="50px";
}       

expandBox("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin euismod metus, at blandit neque maximus ac. Integer fermentum nulla at nibh suscipit, a placerat est pretium. Morbi varius ornare enim, ac pulvinar elit aliquet in. Nullam non diam in nibh consectetur fringilla id nec enim. Mauris lacinia a augue ac consectetur. Etiam tempor et elit a dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam interdum pulvinar pharetra. Aliquam erat volutpat. Aliquam non diam eget turpis tincidunt venenatis at in est. Duis laoreet nibh ultrices erat faucibus hendrerit.")

你可以看到小提琴

所以，我知道50px不是一个好的高度，但这里重要的是过渡不起作用。您可能已经注意到var

someText

在这里是无用的；但这确实是为了表达我的怀疑。我已尝试将其从

enlargeBoxHeight

通话中取下。因此，现在代码的最后一部分是：

...
        timerHeight= setTimeout(enlargeBoxHeight,1);
    }
}

function enlargeBoxHeight(){
    document.querySelector("#red_box").style.maxHeight ="50px";
}   

expandBox("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin euismod metus, at blandit neque maximus ac. Integer fermentum nulla at nibh suscipit, a placerat est pretium. Morbi varius ornare enim, ac pulvinar elit aliquet in. Nullam non diam in nibh consectetur fringilla id nec enim. Mauris lacinia a augue ac consectetur. Etiam tempor et elit a dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam interdum pulvinar pharetra. Aliquam erat volutpat. Aliquam non diam eget turpis tincidunt venenatis at in est. Duis laoreet nibh ultrices erat faucibus hendrerit.")

令人惊讶的是：转换现在可以运行了。为什么？我错过了什么

当您这样做时：

setTimeout(enlargeBoxHeight,1);

timerHeight= setTimeout(enlargeBoxHeight(someText),1);

如果没有括号

（）

，则将函数

放大框高度

传递到超时，而不调用它。超时将在1ms后调用它。这产生了预期的行为+转变

当您这样做时：

setTimeout(enlargeBoxHeight,1);

timerHeight= setTimeout(enlargeBoxHeight(someText),1);

将函数

放大框高度

的结果传递给超时<代码>（）部分强制javascript立即调用函数，并在超时之前处理所有内容。因此，这种转变不起作用。1ms后，javascript处理结果（未定义或不相关）

如果要将参数传递到超时，请执行以下操作：

timerHeight= setTimeout(enlargeBoxHeight.bind(someText),1);

---

这应该可以按预期工作。

像这样管理Javascript中的样式会让你自己发疯。你最好把它放在CSS中，并在更改文本时切换一个类。谢谢，这听起来不错！但是我仍然对这种行为感到好奇……基本上，

setTimeout（foo（），500）

不会等待半秒钟，但是

setTimeout（foo，500）

会。第一个函数立即运行该函数。您需要执行

setTimeout（foo.bind（this，someArgument），500）

传递一个参数，但是

setTimeout（function（）{foo（someArgument）；}，500）

也可以。您想

绑定（this，someText）

。