jquery - 动态 DOM 元素上的 webKit 转换

Question

我在 CSS 文件中为转换定义了 div 类:

div.BlackOut {
 -webkit-transition-property: opacity;
    -webkit-transition-duration: 2s;
}

然后，在我的 javascript 中添加一个动态 dom 元素(通过 jQuery):

var cssObj = {
   'background-color' : '#000',
   'width' : '100%',
   'height' : '400px',
   'position' : 'absolute',
   'top' : 0,
   'z-index' : '9998'
  };
var element = $("<div>").css(cssObj).addClass('BlackOut').appendTo( 'body' );
element.get(0).style.opacity = 0;

但是转换没有开始!

为什么？

Answer 1

我遇到了同样的问题，发现我的转换会发生，但转换不会运行 - 没有动画。看起来，如果您尝试在元素进入 DOM 之前执行转换，它将忽略转换——同时仍然执行转换。我不知道这是一个错误还是符合规范。

无论如何，如果您的新元素是图像，您可以通过 load 事件添加您的 transitions/css 类。

但是，我找不到将 sans-url 元素添加到 DOM 时触发的事件。我选择回退到超时，这也应该适用于您。

你的代码看起来像这样:

var element = $("<div id='BlackOutDiv'></div>").css(cssObj).appendTo( 'body' );
setTimeout(function() {
  $('#BlackOutDiv').addClass('BlackOut');
}, 100);