jquery - 使用 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

我知道你说过你不想在 CSS 中复制整个对象的样式，但是你有没有想过为过渡添加一个特殊的类？然后你可以在 HTML 中像这样定义元素:

<div id='#yourobject' class='transition'>

当你不想转换时，只需这样做(假设是 jQuery):

$('#yourobject').removeClass('transition');
.... do some manipulation here
$('#yourobject').addClass('transition');