动态 DOM 元素上的 webKit 转换

发布于 2024-10-05 06:44:38 字数 550 浏览 3 评论 0原文

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

但转换没有开始！

为什么？

原文

I my CSS file I define my div class for transitions:

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

Then, in my javascript add a dynamic dom element (via 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;

But the transition doesn't start!

Why?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

关于从前 2024-10-12 06:44:38

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

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

但是，我无法找到将 sans-url 元素添加到 DOM 时触发的事件。我选择了暂停，这对你也应该有效。

你的代码看起来像这样：

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

I was running into the same problem, and found that my transformations would occur, but the transition would not run - no animation. It appears that if you try to execute the transitions before the element is in the DOM, it will ignore the transitions - while still executing the transformation. I don't know enough to say whether that's a bug or according to spec.

Anyway, if your new element is an image, you could add your transitions/css class via the load event.

However, I was unable to find an event that fires when sans-url elements are added to the DOM. I chose to fall back on a timeout, which should work for you as well.

Your code would look something like this:

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

回复收藏 0 原文

霞映澄塘 2024-10-12 06:44:38

我认为你需要一个缓动或者可能是一个不透明度。所以：

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;
}

I think you need an easing or perhaps an opacity. So:

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

That should work, but maybe you also would want to future proof your css, to also include other browsers (FF 4 for example):

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;
}

回复收藏 0 原文

~没有更多了~