There are various ways to do this - see here for some.
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. 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.
Temp disable link css code#
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. notransition, 1) īut this doesn't reliably work either. This is actually a fairly subtle problem.įirst up, you probably want to create a 'notransition' class that you can apply to elements to set their *-transition CSS attributes to none. or equivalent code using whatever other library or framework you're working with. $someElement.removeClass('notransition') // Re-enable transitions $someElement.offsetHeight // Trigger a reflow, flushing the CSS changes $someElement.addClass('notransition') // Disable transitionsĭoWhateverCssChangesYouWant($someElement) ('notransition') // Re-enable transitions SomeElement.offsetHeight // Trigger a reflow, flushing the CSS changes ('notransition') // Disable transitionsĭoWhateverCssChangesYouWant(someElement)
0 kommentar(er)
