What is the cleanest way to disable CSS transition effects temporarily

Question

I have a DOM element with some all of the following effects applied     elem     -webkit-transition  height 0 4s ease    -moz-transition  height 0 4s ease    -o-transition  height 0 4s ease    transition  height 0 4s ease      I am writing a jQuery plugin that is resizing this element  I need to disable these effects temporarily so I can resize it smoothly    What is the most elegant way of disabling these effects temporarily  and then re-enabling them   given they may be applied from parents or may not be applied at all

User · Accepted Answer

Short Answer  Use this CSS    notransition     -webkit-transition  none  important    -moz-transition  none  important    -o-transition  none  important    transition  none  important      Plus either this JS  without jQuery      someElement classList add  notransition       Disable transitions doWhateverCssChangesYouWant someElement   someElement offsetHeight     Trigger a reflow  flushing the CSS changes someElement classList remove  notransition       Re-enable transitions   Or this JS with jQuery      someElement addClass  notransition       Disable transitions doWhateverCssChangesYouWant  someElement    someElement 0  offsetHeight     Trigger a reflow  flushing the CSS changes  someElement removeClass  notransition       Re-enable transitions       or equivalent code using whatever other library or framework you re working with   Explanation  This is actually a fairly subtle problem   First up  you probably want to create a  notransition  class that you can apply to elements to set their  -transition CSS attributes to none  For instance    notransition     -webkit-transition  none  important    -moz-transition  none  important    -o-transition  none  important    transition  none  important       Minor aside - note the lack of an -ms-transition in there  You don t need it  The first version of Internet Explorer to support transitions at all was IE 10  which supported them unprefixed    But that s just style  and is the easy bit  When you come to try and use this class  you ll run into a trap  The trap is that code like this won t work the way you might naively expect      Don t do things this way  It doesn t work  someElement classList add  notransition   someElement style height    50px     just an example  could be any CSS change someElement classList remove  notransition     Naively  you might think that the change in height won t be animated  because it happens while the  notransition  class is applied  In reality  though  it will be animated  at least in all modern browsers I ve tried  The problem is that the browser is caching the styling changes that it needs to make until the JavaScript has finished executing  and then making all the changes in a single reflow  As a result  it does a reflow where there is no net change to whether or not transitions are enabled  but there is a net change to the height  Consequently  it animates the height change   You might think a reasonable and clean way to get around this would be to wrap the removal of the  notransition  class in a 1ms timeout  like this      Don t do things this way  It STILL doesn t work  someElement classList add  notransition   someElement style height    50px     just an example  could be any CSS change setTimeout function     someElement classList remove  notransition     1     but this doesn t reliably work either  I wasn t able to make the above code break in WebKit browsers  but on Firefox  on both slow and fast machines  you ll sometimes  seemingly at random  get the same behaviour as using the naive approach  I guess the reason for this is that it s possible for the JavaScript execution to be slow enough that the timeout function is waiting to execute by the time the browser is idle and would otherwise be thinking about doing an opportunistic reflow  and if that scenario happens  Firefox executes the queued function before the reflow   The only solution I ve found to the problem is to force a reflow of the element  flushing the CSS changes made to it  before removing the  notransition  class  There are various ways to do this - see here for some  The closest thing there is to a  standard  way of doing this is to read the offsetHeight property of the element   One solution that actually works  then  is  someElement classList add  notransition       Disable transitions doWhateverCssChangesYouWant someElement   someElement offsetHeight     Trigger a reflow  flushing the CSS changes someElement classList remove  notransition       Re-enable transitions   Here s a JS fiddle that illustrates the three possible approaches I ve described here  both the one successful approach and the two unsuccessful ones   http   jsfiddle net 2uVAA 131

User · Answer

This is the workaround that worked easily for me  It isn t direct answer to the question but still may help someone  Rather than creating notransition class which was supposed to cancel the transition  notransition     -webkit-transition  none  important    -moz-transition  none  important    -o-transition  none  important    transition  none  important     I created moveTransition class  moveTransition         -webkit-transition  left 3s  top 3s        -moz-transition  left 3s  top 3s        -o-transition  left 3s  top 3s        transition  left 3s  top 3s     Then I added this class to element with js element classList add  quot moveTransition quot    And later in setTimeout  I removed it element classList remove  quot moveTransition quot    I wasn t able to test it in different browsers but in chrome it works perfectly

User · Answer

I would advocate disabling animation as suggested by DaneSoul  but making the switch global     kill the transitions on any descendant elements of  notransition    notransition        -webkit-transition  none  important     -moz-transition  none  important     -o-transition  none  important     -ms-transition  none  important     transition  none  important         notransition can be then applied to the body element  effectively overriding any transition animation on the page      body   toggleClass  notransition

User · Answer

If you want a simple no-jquery solution to prevent all transitions    Add this CSS    body no-transition       transition  none  important       And then in your js    document body classList add  no-transition        do your work  and then either immediately remove the class   document body classList remove  no-transition        or  if browser rendering takes longer and you need to wait until a paint or two   setTimeout      gt  document body classList remove  no-transition    1        try changing 1 to a larger value if the transition is still applying

User · Answer

If you want to remove CSS transitions  transformations and animations from the current webpage you can just execute this little script I wrote  inside your browsers console    let filePath    https   dl dropboxusercontent com s ep1nzckmvgjq7jr remove transitions from page css   let html     lt link rel  stylesheet  type  text css  href    filePath   gt    document querySelector  html  gt  head   insertAdjacentHTML  beforeend   html     It uses vanillaJS to load this css-file  Heres also a github repo in case you want to use this in the context of a scraper  Ruby-Selenium   remove-CSS-animations-repo

User · Answer

Add an additional CSS class that blocks the transition  and then remove it to return to the previous state  This make both CSS and JQuery code short  simple and well understandable   CSS    notransition     -webkit-transition  none  important    -moz-transition  none  important    -o-transition  none  important    -ms-transition  none  important    transition  none  important       important was added to be sure that this rule will have more  weight   because ID is normally more specific than class   JQuery       elem   addClass  notransition       to remove transition     elem   removeClass  notransition       to return to previouse transition

User · Answer

For a pure JS solution  no CSS classes   just set the transition to  none   To restore the transition as specified in the CSS  set the transition to an empty string      Remove the transition elem style transition    none       Restore the transition elem style transition         If you re using vendor prefixes  you ll need to set those too   elem style webkitTransition    none

User · Answer

I d have a class in your CSS like this    no-transition      -webkit-transition  none    -moz-transition  none    -o-transition  none    -ms-transition  none    transition  none      and then in your jQuery       elem   addClass  no-transition      will disable it     elem   removeClass  no-transition      will enable it

User · Answer

I think you could create a separate css class that you can use in these cases    disable-transition     -webkit-transition  none    -moz-transition  none    -o-transition  color 0 ease-in    -ms-transition  none    transition  none      Then in jQuery you would toggle the class like so        lt your-element gt    addClass  disable-transition

User · Answer

You can disable animation  transition  trasforms for all of element in page with this css code  var style   document createElement  style    style type    text css   style innerHTML              CSS transitions        -o-transition-property  none  important       -moz-transition-property  none  important       -ms-transition-property  none  important       -webkit-transition-property  none  important        transition-property  none  important        CSS transforms         -o-transform  none  important       -moz-transform  none  important         -ms-transform  none  important        -webkit-transform  none  important         transform  none  important          CSS animations          -webkit-animation  none  important         -moz-animation  none  important         -o-animation  none  important         -ms-animation  none  important         animation  none  important        document getElementsByTagName  head   0  appendChild style

User · Answer

does       elem   css  -webkit-transition   none  important       in your js kill it   obviously repeat for each

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

Short Answer

Explanation

Examples related to javascript

Examples related to jquery

Examples related to css