Question

I’m trying to build a single page web based application, so the entire UI is loaded into the DOM at once, but only parts of it are ever visible to the user at one time.

Originally I set off screen elements to display:none but it broke animations/transitions I wanted to use to display/hide the elements.

What I’m doing right now is transitioning the elements off screen by adjusting opacity/position etc and once it’s out of view I set a class on the element that clips it like this: clip: rect(0, 0, 0, 0) so that it won’t interfere w/ the onscreen elements and the user can’t click on it.

This has been working well, but my question is if there’s a better / more efficient way of doing this? I guess I worry if speed could be a problem as more and more elements get loaded into the DOM as the app grows.

So I’m looking for the most efficient way of hiding elements so that the browser can efficiently only deal w/ the onscreen elements.

Thanks for any suggestions.

Answer 1

You can do visibility: hidden.