Skip CSS transition with jQuery

Question

I want to skip the CSS transition under certain conditions. I would prefer not to add custom styles without going into my stylesheet or duplicate style styles in my JavaScript. So far, the best solution I've found is

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

(I briefly omitted CSS for non-WebKit. See it in action http://jsfiddle.net/TrevorBurnham/zZBhx/ .)

I don't like it because

• He is detailed and
• He introduces potential race conditions, for example. if another timeout is in the queue, which will add or remove the class on $el .

Is there a better way?

Answer 1

Here's one approach: clone an element, add a class to the clone, and replace the original element with the clone. Bam! No transition.

Demo: http://jsfiddle.net/TrevorBurnham/yXhBz/

This is not ideal, though, because it violates any stored links to the source element that you may have in your application. Therefore, I would welcome an answer that works in sync with an existing element.

Answer 2

Here is a reliable way to skip CSS element transitions, the code comes from the Mozilla X-Tag Web Component Library :

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

HOW TO USE IT - this snippet assumes that you set the transition to the width of the foo element and want to immediately change it to 100px without the transition of the element.

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

DIRECT EXAMPLE

Click on each of the colored divs in the example - the red div has its own width style set in the skipTransition function, thereby preventing the transition and setting the style immediately. The blue div has a usually set width without skipTransition, and the CSS transition effect happens as usual: http://codepen.io/csuwldcat/pen/nFlse

Answer 3

I know that you said that you didn’t want to duplicate the style of the whole object in CSS, but did you think about adding a special class just for the transition? Then you can define such an element in HTML:

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

And if you don't need the transition, just do it (assuming jQuery):

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

Answer 4

Here are some jquery plugins I wrote:

 $.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; }; 

Assuming css is talking about transition height, use it like this:

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