javascript - 动态插入 DOM 对象且未应用过渡

Question

我用这种方式向我的对象添加了一个 DIV

    //add the slide to module
    self.activeSlideDom = $("<div id='module_"+self.moduleId+"-slide_"+self.activeSlide+"' class='slide'></div>").appendTo("div#module_"+self.moduleId);

类为“slide”的 DIV 的样式规则如下所示:

.slide {
padding:0px;
position:absolute;
left:0px;
top:0px;

width:100%;
height:100%;
background:transparent;
/* display:none; */
opacity:0;

-webkit-transform: translateZ(0);    
transition: opacity 2s;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s; /* Opera */
}

然后我将它的不透明度设置为 1，认为这会使它淡入......

$(self.activeSlideDom).css("opacity","1");

但事实并非如此。但是，如果我打开 chrome“检查元素”并取消选中/选中不透明度规则，则 div 会像预期的那样很好地消失。

那么我设置不透明度值的方式是否存在问题，这就是为什么 div 只是弹出而不是我预期的平滑过渡的原因吗？

Answer 1

为了保持浏览器性能，浏览器在对元素进行所有更改后进行重排或重绘，或者说在更改任何元素的样式后，它会等待一小部分时间来检查是否发生任何其他更改，以最小化回流和重绘的次数。

因此在您的情况下，在创建元素并应用不透明度后，会发生回流和重绘，导致没有过渡。

要解决这个问题，您可以采用两种方法。

i) 强制浏览器调用回流/重绘。

self.activeSlideDom = $("<div id='module_"+self.moduleId+"-slide_"+self.activeSlide+"' class='slide'></div>").appendTo("div#module_"+self.moduleId);

var offset = self.activeSlideDom.offset();
    
$(self.activeSlideDom).css("opacity","1");

任何需要由浏览器计算的 css 属性调用回流/重绘。像 .height()、.position()、.offset() 等

ii) 在回流/重绘完成后通过将其添加到异步队列来更改 css。

setTimeout(function(){
  $(self.activeSlideDom).css("opacity","1");
},0);