Hacker News Reader

Is there a good rule of thumb for how to transition new elements into the DOM? Right now, if I have an overlay, I mount it offscreen, and then do a `setTimeout(..., 0)` callback that transitions the overlay into view.

This works, but it seems a little glitchy in some environments. I'm wondering if it's too much to make DOM modification and then trigger a transition in the next tick.

View on HN

SetTimeout with 0 is a hack, you should have much better result with requestAnimationFrame when it comes to animate something. Also changing class in your DOM and perform the animation in CSS is the way that works best today. Hopefully this will change when the animation API will have better support from JS: https://developer.mozilla.org/en-US/docs/Web/API/Element/ani...

You mean the element is moved offscreen, and has display: none; applied? And now you want to move it onscreen.

Do it entirely css. if you use a have a keyframe animation applied and remove display:none on clicking. The animation will fire immediately. Unlike trying to transition it without using keyframes.

example: https://jsfiddle.net/mr029o7h/ (sorry if its a bit messy haven't done this for a while)

Reply on news.ycombinator.com