CSS 渐变显示：隐藏元素的平滑过渡效果

使用 CSS 属性 'opacity' 和 'height'，以及 'transition' 过渡效果，可以实现元素的隐藏和显示时的平滑渐变效果。

示例代码：

/* 初始状态下，元素设置为隐藏且不占用空间 */
.element {
  opacity: 0;
  height: 0;
  overflow: hidden;
}

/* 显示时，通过过渡属性实现渐变显示效果 */
.element.show {
  opacity: 1;
  height: auto;
  transition: opacity 1s, height 1s;
}

在 JavaScript 中，可以通过添加或移除 CSS 类名来控制元素的显示和隐藏，并触发过渡效果。

示例代码：

// 获取需要操作的元素
const element = document.querySelector('.element');

// 添加CSS类名，实现渐变显示效果
element.classList.add('show');

// 移除CSS类名，实现渐变隐藏效果
element.classList.remove('show');