css过渡到新元素
[英]css transitions on new elements
问题描述
我找不到在新创建的dom元素上使用css过渡的方法。
假设我有一个空的html文档。
<body>
<p><a href="#" onclick="return f();">click</a></p>
</body>
我也有这个CSS
#id {
-moz-transition-property: opacity;
-moz-transition-duration: 5s;
opacity: 0;
}
#id.class {
opacity: 1;
}
而这个js
function f() {
var a = document.createElement('a');
a.id = 'id';
a.text = ' fading in?';
document.getElementsByTagName('p')[0].appendChild(a);
// at this point I expect the span element to be with opacity=0
a.className = 'class';
// now I expect the css transition to go and "fade in" the a
return false;
}
但是，正如您在http://jsfiddle.net/gwxkW/1/上看到的那样，当您单击该元素时，会立即显示。
如果我尝试在timeout()设置类，我经常会找到结果，但对我而言，它似乎更像是javascript和css引擎之间的竞争。 是否有一些特定的事件要听？ 我试图使用document.body.addEventListener('DOMNodeInserted', ...)但它不起作用。
如何在新创建的元素上应用css过渡？
3 个解决方案
解决方案1
38 2012-08-23 10:04:17
在Firefox中，它似乎是布局完成和CSS转换之间的竞争。 Chrome更具可预测性。 如果我在setTimeout()上设置类名，则Chrome始终有效，只有在setTimeout()时间很长时，Firefox才有效。
在Firefox中使用此代码（甚至使用setTimeout() ），文本立即显示：
function f() {
var a = document.createElement('a');
a.id = 'id';
a.innerHTML = ' fading in?';
document.getElementsByTagName('p')[0].appendChild(a);
// at this point I expect the span element to be with opacity=0
setTimeout(function() {
a.className = 'fadeIn';
}, 10);
return false;
}
但是，如果我通过请求只能在布局后返回的属性来强制重排，那么它将开始在Firefox中工作：
function f() {
var a = document.createElement('a');
a.id = 'id';
a.innerHTML = ' fading in?';
document.getElementsByTagName('p')[0].appendChild(a);
// at this point I expect the span element to be with opacity=0
// request property that requires layout to force a layout
var x = a.clientHeight;
setTimeout(function() {
a.className = 'fadeIn';
}, 10);
return false;
}
此外，一旦我请求该属性强制布局，我甚至可以删除setTimeout() ，并且动画可以在Firefox中使用。
function f() {
var a = document.createElement('a');
a.id = 'id';
a.innerHTML = ' fading in?';
document.getElementsByTagName('p')[0].appendChild(a);
// at this point I expect the span element to be with opacity=0
// request property that requires layout to force a layout
var x = a.clientHeight;
a.className = 'fadeIn';
return false;
}
您可以在Chrome和Firefox中看到最后一个工作： http ： //jsfiddle.net/jfriend00/phTdt/
而且，这是一篇讨论这种现象的文章： http ： //gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html
解决方案2
13 2014-06-30 13:13:12
我找到了一种更好的方法来触发布局，并在将元素附加到DOM之后使转换工作：
window.getComputedStyle(element).opacity;
解决方案3
8 已采纳 2014-12-22 20:20:03
requestAnimationFrame() （ https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame ）似乎适用于Firefox，Chrome和Safari。 setTimeout()是一个更可靠，更合理的解决方案。 对于旧版浏览器（IE8），它将需要Polyfill（当然，不会发生转换，但CSS仍会发生变化）。
使用CSS过渡隐藏屏幕外的元素
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.