Пропустить переход CSS с помощью jQuery

Question

Я хочу пропустить переход CSS при определенных условиях. Я бы предпочел не добавлять специальные стили без перехода в мою таблицу стилей или дублировать стили моей таблицы стилей в моем JavaScript. Пока что лучшее решение, которое я нашел, это

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

(я для краткости опускаю CSS без WebKit. Смотрите его в действии на http://jsfiddle.net/TrevorBurnham/zZBhx/.)

Мне это не нравится, потому что

1. Это многословно, а
2. Он вводит потенциальные условия гонки, например, если в очереди есть другой тайм-аут, который добавит или удалит класс в $el.

Есть ли лучший способ?

Answer 1

Вот надежный метод пропуска перехода CSS элемента, код взят из библиотеки X-Tag Web-компонентов Mozilla :

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';
});

LIVEПРИМЕР

Щелкните каждый из цветных элементов div в примере - красный элемент div имеет свой стиль ширины, установленный в функции skipTransition, что предотвращает переход и устанавливает стиль немедленно.Синий div имеет ширину, установленную обычно без skipTransition, и эффект перехода CSS происходит как обычно: http://codepen.io/csuwldcat/pen/nFlse

Answer 2

Я знаю, вы сказали, что не хотите дублировать стиль всего объекта в CSS, но задумывались ли вы о добавлении специального класса только для перехода?Затем вы можете определить этот элемент в HTML:

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});