undefined | Better HN

0 pointsbrundolf5y ago0 comments

At least in the example on this page, it performs .fadeOut() by changing the opacity via JavaScript instead of using the CSS transition property. You can verify by inspecting the DOM

https://api.jquery.com/fadeOut/

Edit: I just realized you said "transforms". Transforms are a separate question from transitions. CSS transforms are concerned with giving an element a different size, rotation, and/or position. Transitions are concerned with changing any given CSS property gradually over time (including potentially transforms). I think you're right that jQuery started using CSS transforms, but it does not appear to use CSS transitions.

0 comments

brundolfOP5y ago

Edit: I partly misspoke. I assumed CSS transitions would be nontrivially more performant since it's a more declarative API and the math would be done natively by the browser, but according to MDN the performance difference is negligible in most (though not all) cases if you're using requestAnimationFrame in the JavaScript version: https://developer.mozilla.org/en-US/docs/Web/Performance/CSS...

The main case where CSS transitions are meaningfully faster appears to actually be transforms themselves, because for those the actual transition, too, can be moved to the GPU, whereas a JavaScript-driven transition still has to be run on the main CPU thread.

jamiesonbecker5y ago

Fair point. Thanks for bringing it up!

j / k navigate · click thread line to collapse

0 comments

brundolfOP5y ago

jamiesonbecker5y ago

Fair point. Thanks for bringing it up!

j / k navigate · click thread line to collapse