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“inspect element”并取消选中/检查不透明度规则，则div会像预期的那样很好地消失。

所以我设置不透明度值的问题是，为什么div会弹出而不是我预期的平滑过渡？

Answer 1

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

因此，在您的情况下，在创建元素并应用不透明度后，将发生重排和重绘，从而导致无转换。

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

i）强制浏览器调用reflow / repaint。

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来进行css更改。

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

动态插入DOM对象并且不应用转换

1 个答案: