CSS过渡：使用JavaScript触发

Question

我之前曾问过一个有关使用JavaScript和setTimeout 触发CSS转换的问题 （ JavaScript：使用window.setTimeout触发CSS转换 ）。 这个问题试图获得更多的信息。

我有一个函数，它可以更改内容并在parappnp 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;
}

我注意到必须在p#test[on]规则中设置 transition属性。 如果为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属性为时，才会触发transition 。

抱歉，序言很长。 问题是：

究竟哪种 JavaScript实际上会触发CSS转换？ 它仅仅是改变类或属性，还是其他任何方法都能起作用？

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

Answer 1

愚蠢的问题，但是基础元素（ p#test ）上是否也具有transition属性？ 在示例代码中，过渡属性仅在“ on”状态下存在。

如果不是这样，可能是因为您在同一函数中立即将不透明度从0更改为1。 查看微小的setTimeout是否可以使opacity = 1行有所作为。