1

我的 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;

但转型并未开始！

为什么？

4

2 回答 2

1

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

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

但是，我找不到将 sans-url 元素添加到 DOM 时触发的事件。我选择使用超时，这也应该对你有用。

您的代码将如下所示：

var element = $("<div id='BlackOutDiv'></div>").css(cssObj).appendTo( 'body' );
setTimeout(function() {
  $('#BlackOutDiv').addClass('BlackOut');
}, 100);
于 2012-02-07T09:32:06.467 回答
0

我认为你需要一个 easing 或者一个opacity. 所以：

div.BlackOut {
    opacity: 1;
    -webkit-transition: opacity 2s ease-out;
}

这应该可行，但也许您还希望将来证明您的 css，还包括其他浏览器（例如 FF 4）：

div.BlackOut {
    opacity: 1;
    -webkit-transition: opacity 2s ease-out;
     -khtml-transition: opacity 2s ease-out;
       -moz-transition: opacity 2s ease-out;
         -o-transition: opacity 2s ease-out;
            transition: opacity 2s ease-out;
}
于 2011-02-22T15:38:01.267 回答