使用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');

Answer 2

这里有一个跳过元素CSS转换的可靠方法，代码来自Mozilla的X-Tag Web组件库：

var prefix = (function () {
  var styles = window.getComputedStyle(document.documentElement, ''),
      pre = (Array.prototype.slice
        .call(styles)
        .join('')
        .match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
      )[1];
  return {
    dom: pre == 'ms' ? pre.toUpperCase() : pre,
    lowercase: pre,
    css: '-' + pre + '-',
    js: pre[0].toUpperCase() + pre.substr(1)
  };
})();
var requestFrame = (function(){
  var raf = window.requestAnimationFrame ||
    window[prefix.lowercase + 'RequestAnimationFrame'] ||
    function(fn){ return window.setTimeout(fn, 20); };
  return function(fn){
    return raf.call(window, fn);
  };
})();
var skipTransition = function(element, fn, bind){
  var prop = prefix.js + 'TransitionProperty';
  element.style[prop] = element.style.transitionProperty = 'none';
  var callback;
  if (fn) callback = fn.call(bind);
  requestFrame(function(){
    requestFrame(function(){
      element.style[prop] = element.style.transitionProperty = '';
      if (callback) requestFrame(callback);
    });
  });
};

如何使用-这个片段假设您已经在foo元素的宽度上设置了一个转换，并希望在不转换元素的情况下立即将其更改为100px

var foo = document.querySelector('#foo')
skipTransition(foo, function(){
    foo.style.width = '100px';
});

现场示例

单击示例中的每个彩色div-红色div的宽度样式在skipTransition函数中设置，从而阻止转换并立即设置样式。蓝色div的宽度在没有skipTransition的情况下正常设置，CSS转换效果正常发生：http://codepen.io/csuwldcat/pen/nFlse

Answer 3

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

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

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

Answer 4

下面是我写的几个jquery插件：

$.fn.redraw = function(){
    var redraw = $(this).first()[0].offsetHeight || $('body')[0].offsetHeight; // forces a draw in the main window if the element is off screen
    return this;
};
$.fn.cssNoTransition = function(){
    $(this)
            .css('transition', 'none')
            .css.apply(this,arguments)
            .redraw()
            .css('transition', '');
    return this;
};

假设css显示为转换高度，则如下使用：

this.$el.cssNoTransition({height: 0}).css({height: 200});