计算位置/尺寸会导致发生 CSS 过渡答案

【问题标题】：Calculating position/dimensions causes CSS transition to occur计算位置/尺寸会导致发生 CSS 过渡
【发布时间】：2012-03-27 23:42:11
【问题描述】：

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

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

这是一个演示（需要 WebKit）：http://jsfiddle.net/TrevorBurnham/pGZFN/

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

【问题讨论】：

标签： jquery css-transitions

【解决方案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()。

【讨论】：

这不是由“微延迟”引起的竞争条件；将 var startDate = new Date(); while (new Date() - startDate < 1000) {}（同步 1 秒延迟）代替 width() 调用，您将不会获得 CSS 过渡。问题是计算位置会强制 DOM 更新。但我需要在元素添加到 DOM 后计算该位置，以确定是否要调用 addClass。
我可以用setTimeout触发过渡，不计算：jsfiddle.net/pGZFN/6 -- 如果你需要在添加元素后计算位置，那么只需创建一个没有过渡的CSS类，然后一秒钟。
是的，当你使用超时时，你总是会得到一个 CSS 过渡，因为 DOM 从事件队列中更新。在我的情况下，创建一个没有过渡的单独 CSS 类被证明是不可行的，因为我希望在以后删除该类时进行反向过渡。

【解决方案2】：

这是一个适用于我特定情况的答案：克隆元素，将类添加到克隆中，然后用克隆替换原始元素。

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

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

【讨论】：