CSS 元素隐藏技巧：使用 Opacity 实现平滑过渡

可以使用 'opacity' 来控制元素显示与隐藏，同时配合过渡动画实现过渡效果。具体做法如下：

1. 将元素的 'opacity' 设置为 0，即完全透明，此时元素隐藏且不占用空间。

2. 当需要显示元素时，将 'opacity' 设置为 1，并设置过渡动画，如下所示：

.element {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.element.show {
  opacity: 1;
}

3. 当需要隐藏元素时，将 'opacity' 设置为 0，并设置过渡动画，如下所示：

.element.hide {
  opacity: 0;
}

这样做的好处是，不会像使用 'display' 或者 'visibility' 一样造成元素在显示和隐藏时的跳动或者闪烁，同时也不会占用空间。但是需要注意的是，使用 'opacity' 来控制元素显示与隐藏，会影响到元素内部的交互，因为元素虽然不可见，但是仍然存在于文档流中，可以接收到鼠标事件等交互操作。如果需要完全隐藏元素，可以配合使用 'pointer-events: none' 来禁用交互事件。