CSS过渡:用JavaScript触发

Question

我之前问过一个关于用JavaScript触发CSS转换的问题&setTimeout (JavaScript:用window.setTimeout触发CSS过渡)。这个问题试图得到更多关于那个的信息。

我有一个功能，改变内容和淡入段落p#test:

function test() {
    var done=false;
    var p=document.querySelector('p#test');
    window.setInterval(doit,4000);
    var data=0;
    function doit() {
        p.removeAttribute('on');    //  1
        p.offsetHeight;             //  2   force update
        p.innerHTML=data++;         //  3
        p.setAttribute('on',null);  //  4
    }
}

CSS是:

p#test {
    opacity: 0;
}
p#test[on] {
    transition: opacity 1s;
    opacity: 1;
}

我注意transition属性必须在p#test[on]规则中设置。如果设置为p#test规则，它将不起作用。

我发现步骤2 &以上3可以互换

然而，如果我试图单独在JavaScript中设置属性，我无法使其工作:

function doit() {       //  DOES NOT WORK
    p.style.opacity=0;
    p.offsetHeight;
    p.innerHTML=data++;
    p.style.opacity=1;
}

所以我得出结论:

• 在JavaScript中改变一个属性(或类)将触发CSS过渡
• 在JavaScript中更改CSS属性将而不是触发过渡
• 只有当transition属性在触发规则中才会触发转换。

很抱歉前言太长了。问题是:

确切地说什么 JavaScript会触发CSS转换?它只是一个类或属性的改变，还是其他的工作?

我在这里添加了一个提琴:https://jsfiddle.net/comparity/a7qt297m/

Answer 1

愚蠢的问题，但是基础元素(p#test)也有过渡属性吗?在您的示例代码中，transition属性仅用于"on"状态。

如果不是这样，可能是因为您在同一函数中立即连续将不透明度从0更改为1。