A slide-in menu that is initially hidden (HTML
hidden attribute). When I want to show the menu, I remove the
hidden attribute and add a CSS class to the element that is supposed to trigger the transition.
el.hidden = false; el.classList.add('slide-in');
But the transition doesn’t run. The browser just renders the finished state.
In order to make the transition work, I need to trigger a reflow (I think that’s what it’s called).
el.hidden = false; el.scrollTop; // force reflow el.classList.add('slide-in');
Now it works. Demo: https://codepen.io/simevidas/pen/eXdrOp?editors=0010.
While accessing the element’s
scrollTop (or similar) property works, it seems like a hack. Is there a standard approach (API or pattern) for making this type of thing work?
Edit: I remembered the Web Animations API. Maybe if I triggered the CSS transition via this API, the forced reflow would not be necessary. I need to test this.