html - 有没有比 Clip 更好的方法来隐藏未使用的 DOM 元素？

Question

我正在尝试构建一个基于 Web 的单页应用程序，因此整个 UI 会立即加载到 DOM 中，但用户一次只能看到其中的一部分。

最初我将屏幕元素设置为 display:none 但它破坏了我想用来显示/隐藏元素的动画/过渡。

我现在正在做的是通过调整不透明度/位置等将元素从屏幕上移开，一旦它不在 View 中，我就在元素上设置一个类，像这样剪辑它:clip: rect(0, 0, 0, 0) 这样它就不会干扰屏幕上的元素并且用户无法点击它。

这一直运作良好，但我的问题是是否有更好/更有效的方法来做到这一点？我想我担心速度是否会成为问题，因为随着应用程序的增长，越来越多的元素被加载到 DOM 中。

所以我正在寻找隐藏元素的最有效方法，以便浏览器可以有效地只处理屏幕上的元素。

感谢您的任何建议。

Answer 1

你可以做 visibility: hidden。