计算位置/维度会导致CSS转换

Question

所以，这里有一个奇怪的小边缘情况：

如果使用jQuery将一个元素附加到DOM，然后立即对其调用addClass，则不会得到CSS转换。但是，如果对附件和addClass调用之间的任何元素调用position()、offset()、width()、css('left')或任何其他计算方法，则将获得CSS转换。

以下是演示（需要WebKit）：http://jsfiddle.net/TrevorBurnham/pGZFN/

我想完全理解为什么会发生这种情况（链接到jQuery源代码的加分项），并了解是否有解决方法。我有一个站点，我希望addClass调用以元素的位置为条件，但我不希望通常的CSS转换应用于新创建的元素。

Answer 1

如果将addClass()放入延迟一毫秒的setTimeout()中，它也会触发转换：

var $box1 = $('<div class="box">').appendTo($('body'));;
var $box2 = $('<div class="box">').appendTo($('body'));;
setTimeout(function() {
    $box1.addClass('green');
    $box1.width();
    $box2.addClass('green');
}, 1);​

http://jsfiddle.net/pGZFN/4/

但是，如果在将green类附加到DOM之前将其添加到任一框中，则不会发生转换：

var $box2 = $('<div class="box green">').appendTo($('body'));;

http://jsfiddle.net/pGZFN/5/

这让我怀疑，触发转换的不是任何特定的计算方法，而是该方法引起的微延迟。您可能遇到了一个竞争条件，即在div完全附加到DOM之前添加类。

无论如何，我想说，防止转换的最安全方法就是这样做——在将类添加到DOM之前将其添加到元素中，而不是在之后使用addClass()。

Answer 2

以下是适用于我的特定情况的答案：克隆元素，将类添加到克隆中，并用克隆替换原始类。

演示：http://jsfiddle.net/TrevorBurnham/dbn5p/

这并不理想，因为您可能存储了对原始元素的引用，但不想破坏这些引用。在某些情况下，克隆可能会带来其他问题。因此，我很乐意接受其他人直接在元素上解决问题的解决方案。