CSS转场不能在参数化函数中工作

Question

所以我得到了以下代码来创建一个简单的固定红色框:

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.")

和惊喜:转换工作现在。为什么?我在这里错过了什么?

Answer 1

当你这样做的时候:

setTimeout(enlargeBoxHeight,1);

没有括号()，您将函数 enlargeBoxHeight传递给超时，而不调用它。超时将在1ms后调用它。这产生了预期的行为+转变。

当你这样做的时候:

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

将函数enlargeBoxHeight的结果传递给timeout。()部分强制javascript立即调用该函数，并在超时前处理所有内容。所以这种转变是行不通的。1毫秒后，javascript处理结果(未定义或不相关)。

如果你想传递一个参数到超时，执行:

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