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

您可以看到 fiddle here.

所以，我知道 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的结果传递给超时。 () 部分强制 javascript 立即调用该函数，并在超时之前处理所有内容。所以过渡不起作用。 1 毫秒后，javascript 处理结果（with 未定义或不相关）。

如果要将参数传递给超时，请执行：

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

这应该按预期工作。

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

CSS Transitions not working inside parametrized functions

html

javascript

css

css-transitions