基础 CSS 可见性类

在开发 Web 应用时，经常会需要控制元素的可见性。CSS 可见性类就是一组用于控制元素可见性的 CSS 类，它们可以帮助我们简单、灵活地控制页面上的元素的显示与隐藏。

常用的 CSS 类

以下是常用的 CSS 类：

• visible：使元素可见。如果元素之前使用了 hidden 类，则需要移除该类才能让元素可见。

• invisible：使元素不可见，但元素仍占用页面空间。

• hidden：使元素不可见，并将元素从文档流中移除。

使用示例

下面以一个 div 元素为示例，展示如何使用这些可见性类。

<div class="visible">我是可见的</div>
<div class="invisible">我是不可见的，但我仍然占用页面空间</div>
<div class="hidden">我是不可见的，并且我不占用页面空间</div>

自定义 CSS 可见性类

除了上述常用的 CSS 类外，我们还可以自定义 CSS 可见性类，以实现更灵活的控制需求，以下是一个例子：

/* 自定义 visible 类，使元素以淡入淡出的方式出现 */
.visible {
  opacity: 0; /* 初始透明度为 0 */
  transition: opacity 1s ease-in-out; /* 添加淡入淡出的过渡效果 */
}
.visible.show {
  opacity: 1; /* 显示元素时，使透明度为 1 */
}

使用该自定义类的示例代码：

<div class="visible">我将以淡入淡出的方式出现</div>

<script>
setTimeout(() => {
  const visibleEl = document.querySelector('.visible');
  visibleEl.classList.add('show'); // 显示元素
}, 1000);
</script>

总结

使用 CSS 可见性类可以轻松地控制元素的可见性，提高 Web 开发效率。我们可以根据项目需求定义自己的可见性类，以满足更灵活的控制需求。