Question

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

CSS-CODE

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

JS-CODE（这不会转换）

  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渲染之前更改不透明度属性。

添加超时会引入一个延迟，在该延迟中，元素可以在不透明度0下呈现。

即使setTimeoutdelay设置为0）

setTimeout有一个最小的延迟，即使它没有，工作队列可能会在下一个定时动作之上重新绘制。

css转换只能在setInterval中使用？为什么呢？

1 个答案: