Clean way to programmatically use CSS transitions from JS?

by

There isn’t a clean way at this moment (without using CSS Animations — see the nearby answer by James Dinsdale for an example using CSS Animations). There is a spec bug 14617, which unfortunately wasn’t acted upon since it was filed in 2011.

setTimeout does not work reliably in Firefox (this is by design).

I’m not sure about requestAnimationFrame — an edit to the original question says it doesn’t work reliably either, but I did not investigate. (Update: it looks like requestAnimationFrame is considered at least by one Firefox core developer to be the place where you can make more changes, not necessarily see the effect of the previous changes.)

Forcing reflow (e.g. by accessing offsetHeight) is a possible solution, but for transitions to work it should be enough to force restyle (i.e. getComputedStyle): https://timtaubert.de/blog/2012/09/css-transitions-for-dynamically-created-dom-elements/

window.getComputedStyle(elem).opacity;

Note that just running getComputedStyle(elem) is not enough, since it’s computed lazily. I believe it doesn’t matter which property you ask from the getComputedStyle, the restyle will still happen. Note that asking for geometry-related properties might cause a more expensive reflow.

More information on reflow/restyle/repaint: http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/

More Related Contents:

  1. CSS3 transition events
  2. How to use jQuery to wait for the end of CSS3 transitions?
  3. CSS transition doesn’t start/callback isn’t called
  4. How do I normalize the CSS3 transition end events across browsers?
  5. Callback on CSS transition
  6. Detect CSS transitions using Javascript (and without modernizr)?
  7. How to window.scrollTo() with a smooth effect
  8. CSS transitions do not work when assigned trough JavaScript
  9. CSS Transition doesn’t work with top, bottom, left, right
  10. Combination of animation and transition not working properly
  11. css transitions on new elements
  12. Preserve browser window aspect ratio while shrinking [closed]
  13. Change from (+) symbol to (-) after click (function(){
  14. Changing element style attribute dynamically using JavaScript
  15. How to get browser width using JavaScript code?
  16. Get computed font size for DOM element in JS
  17. Use as a CSS background
  18. how to change the background image of div using javascript?
  19. HTML Alignment Issue in one machine only (both IE8)
  20. Setting minimum size limit for a window minimization of browser?
  21. make canvas as wide and as high as parent
  22. show/hide html table columns using css
  23. Set focus and cursor to end of text input field / string w. Jquery [duplicate]
  24. Override the -webkit-search-cancel-button
  25. AngularJS css animation + done callback
  26. jQuery Popup Bubble/Tooltip [closed]
  27. Is there a javascript equivalent to using @media query? [duplicate]
  28. How to make a submit button display as a link?
  29. CKEditor: Class or ID for editor body
  30. Get Element StyleSheet Style in JavaScript

Leave a Comment