CSS 过渡：使用 JavaScript 触发答案

【问题标题】：CSS Transitions: Trigger with JavaScriptCSS 过渡：使用 JavaScript 触发
【发布时间】：2016-09-27 03:31:07
【问题描述】：

我之前问过一个关于使用 JavaScript 和setTimeout (JavaScript: Trigger CSS Transition with 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 转换？只是改变类或属性，还是其他任何方法都可以？

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

【问题讨论】：

能否将您的示例粘贴到jsfiddle.net 上？
@TylerY86 完成。见上文……
所以你是说doit2 不会触发转换，即使transition:opacity 1s; 在p#test 规则中？
@TylerY86 没错。理想情况下，我会将它全部放在 JavaScript 中，这样效果就不会依赖于单独的 CSS，但我认为它不会起作用。
你应该知道改变元素的样式状态和触发过渡的区别；样式状态更改没有滞后，它们没有动画或过渡。更改任何内容都可以通过元素上的规则进行选择，从而允许应用新规则，从而触发转换。显式设置不透明度不会触发过渡。选择器优先级也可以确定样式状态是否实际发生了变化。

标签： javascript css attributes css-transitions

【解决方案1】：

愚蠢的问题，但基本元素（p#test）是否也具有过渡属性？在您的示例代码中，转换属性仅适用于“开启”状态。

如果不是这样，可能是因为您在同一函数中立即将不透明度从 0 更改为 1。看看一个微小的 setTimeout 是否会对 opacity=1 行产生影响。

【讨论】：

在我的测试中，如果我将transition 放在基本元素上，它将不起作用。我不知道为什么。至于更改，如果我删除并设置属性，它会完美工作，只要我包含p.offsetHeight（或任何其他已知会触发布局的语句）。