动态插入 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);

具有“幻灯片”类的 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 属性都会调用 reflow/repaint。比如 .height()、.position()、.offset() 等。

ii) 在重排/重绘完成后更改 css，将其添加到异步队列中。

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