CSS转换不适用于DOM操作
CSS转换不适用于DOM操作
提问于 2013-02-21 15:36:30
假设我已经定义了带有left样式属性的块，并为该属性使用了transition：
<div id="caret" class="caret" style="left: 20px"></div>
.caret {
transition: left 0.3s;
}好吧，当我通过left通过$.css()改变$.css()时，所有的东西都在完美地转换：
$('#caret').css('left', '100px');但是，当我在DOM中将块从一个位置移动到另一个位置，然后更改left，没有任何转换，它就会立即跳转到给定的值：
$('#caret').appendTo('#container').css('left', '50px');不管怎么说，如果我稍等片刻，再一次改变left，过渡又回来了。感觉好像需要时间来准备。
我创建了一个简单的展示来演示这个问题：http://jsfiddle.net/L624m/2/
那为什么会发生这种事？
回答 1
Stack Overflow用户
发布于 2013-02-21 16:13:23
问题是，在典型的浏览器中，JavaScript代码不允许DOM首先创建新元素，因此样式实际上将直接应用于新元素，因此根本不会导致转换。
在追加元素之后，您必须“中断”JavaScript并让DOM首先注意到新元素；通常这是通过使用具有0ms间隔的setTimeout来完成的，例如：
setTimeout(function(){
caret.css('left', left === '20px' ? '100px' : '20px');
},0);因此，由于有了setTimeout，浏览器将总是在left样式中的更改在之后排队-- DOM中的更改实际上是进行的，而不是自己排队。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15006164
复制相关文章
相似问题
腾讯云开发者
