What is the cleanest way to disable CSS transition effects temporarily?

Managing transitions with a separate CSS class

For a more global and easy-to-control approach, let's befriend with a CSS super-hero named .notransition. His superpower? Disenabling transitions!

.notransition {
  transition: none !important; // Says NO to transitions!
}


Summon this super-hero whenever you want to pause transitions without any JS hustle:

el.classList.add('notransition'); // Calling Mr. NoTransition for help!

// Reflow: "Time to leave those changes behind!"
el.offsetHeight;

// Sending Mr. NoTransition for a vacation!
el.classList.remove('notransition');


That sneaky offsetHeight access triggers that DOM needs a refreshment. It's like telling the browser, "Hey, can you update those changes real quick?" And BOOM! No transitions. Nada. Zilch!

Navigating through inherited transitions

CSS transition effects are like traditions passed through generations, unasked but inherited. Therefore, apply the .notransition class to the children too, or just apply it to the ancestor itself.

Give a short break to your entire webpage by attaching .notransition class to body tag:

document.body.classList.add('notransition'); // "Everybody, freeze!"
// Manipulate the DOM here...
document.body.offsetHeight; // "Let's wrap this up."
document.body.classList.remove('notransition'); // "Let it go!"


Use-case scenarios and solutions that fit like a glove

Smooth transitions with jQuery

Resizing using jQuery plugins? Be the boss and stop the jittering animations whenever you want:

$('.resize-element').addClass('notransition'); // "Hold my beer!"
$(window).resize();  // Resizing the element
$('.resize-element').get(0).offsetHeight; // "Shake it off."
$('.resize-element').removeClass('notransition'); // "Release the kraken!"


Adding Spice with Dynamic Styles

Want to pull a Thanos snap and make all transitions vanish, at least temporarily? Inject a <style> tag dynamically:

const styleTag = document.createElement('style');
styleTag.innerHTML = '* { transition: none !important; }'; // "I am inevitable."
document.head.appendChild(styleTag);

// Perform the grand operation...

document.head.removeChild(styleTag); // "And, I... am... Iron Man."


Tailoring solutions for your Framework

Are you a Vue, React, or Angular fan? These folks have their own ways of dealing with styles and classes. Do explore v-bind:class, className, or [ngClass] respectively for these frameworks.

Avoid version roast

Reflow required

Remember, every browser is a kingdom of its own. offsetHeight is diplomatic for most, but not all. To ensure a smooth sail, read the brochures(browser docs)!

Precise prohibition

Oh, the power of !important! But remember, "with great power, comes great responsibility" Use !important only for knights in the shining armor cases. It's like pulling out the Excalibur; not for a bar fight!

Browsers have feelings too

Sprinkling notransition everywhere like confetti can make your browser cry. Remember, every party comes with a cleanup! Make sure cleaning up won't leave a dent on your performance.