使用 jQuery 跳过 CSS 过渡

Question

我想在某些条件下跳过 CSS 转换。我不想在我的样式表中添加特殊的无转换样式，或者在我的 JavaScript 中复制我的样式表的样式。到目前为止，我找到的最好的解决方案是

if (condition) {
  $el.css({'-webkit-transition-duration': '0s'});
  setTimeout(function() {
    $el.css({'-webkit-transition-duration': ''});
  }, 0);
};
$el.addClass('transitionClass');

（为简洁起见，我省略了非 WebKit CSS。在http://jsfiddle.net/TrevorBurnham/zZBhx/ 上查看它的实际效果。）

我不喜欢这个因为

1. 它很冗长，而且
2. 它引入了潜在的竞争条件，例如，如果队列中的另一个超时将添加或删除 上的类$el。

有没有更好的办法？

Answer 1

这是一种方法：克隆元素，将类添加到克隆中，然后用克隆替换原始元素。嘭！没有过渡。

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

但这并不理想，因为这会破坏应用程序中可能拥有的对原始元素的任何存储引用。因此，我欢迎在现有元素上同步运行的答案。