CSS过渡仅在setInterval内有效？ 为什么？

Question

在脚本中的某个点发生以下情况

CSS-CODE

.tt{ opacity: 0; transition: all 1s;}

JS代码（不转换）

  this.element.insertAdjacentHTML('beforeend',`<div class="tt">this is a message</div>`);
  this.tooltip = this.element.querySelector('.tt');
  this.tooltip.style.opacity = 1; => THIS DOES NOT TRANSITION

但是，当我更改密码时（此操作会转换）

  this.element.insertAdjacentHTML('beforeend',`<div class="tt">${this.element.dataset.tooltip}</div>`);
  this.tooltip = this.element.querySelector('.tt');
  setTimeout(function(){
    this.tooltip.style.opacity = 1 => THIS DOES TRANSITION
  }.bind(this),0);

为什么？ （即使setTimeoutdelay设置为0）

Answer 1

在一个渲染状态和另一渲染状态之间会发生过渡。

您的第一个代码块在元素以不透明度0呈现之前更改了opacity属性。

添加超时会引入延迟，在该延迟中可以以不透明度0渲染元素。

即使setTimeoutdelay设置为0）

setTimeout具有最小的延迟，即使没有延迟，作业队列也可能在下一个定时操作之上重新绘制。