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

你可以看到小提琴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立即调用该函数，并在超时之前处理所有内容。所以过渡不起作用。在1ms之后，javascript处理结果（未定义或不相关）。

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

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

哪个应该按预期工作。

CSS Transitions在参数化函数中不起作用

1 个答案: