我在 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;
但是转换没有开始!
为什么?
最佳答案
我遇到了同样的问题,发现我的转换会发生,但转换不会运行 - 没有动画。看起来,如果您尝试在元素进入 DOM 之前执行转换,它将忽略转换——同时仍然执行转换。我不知道这是一个错误还是符合规范。
无论如何,如果您的新元素是图像,您可以通过 load
事件添加您的 transitions/css 类。
但是,我找不到将 sans-url 元素添加到 DOM 时触发的事件。我选择回退到超时,这也应该适用于您。
你的代码看起来像这样:
var element = $("<div id='BlackOutDiv'></div>").css(cssObj).appendTo( 'body' );
setTimeout(function() {
$('#BlackOutDiv').addClass('BlackOut');
}, 100);
关于jquery - 动态 DOM 元素上的 webKit 转换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4337972/