Question

所以，这是一个奇怪的小边缘案例：

如果使用jQuery将元素附加到DOM，然后立即在其上调用addClass，则不会进行CSS转换。但是，如果您在附件和position()来电之间的任何元素上拨打offset()，width()，css('left')，addClass或任何其他计算方法，那么将获得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/

这并不理想，因为您可能已经存储了对您不想破坏的原始元素的引用。在某些情况下，克隆可能会引入其他问题。所以我很乐意接受其他任何解决问题的解决方案。

计算位置/尺寸会导致CSS转换发生

2 个答案: