当前位置：首页 > 文章列表 > 文章 > 前端 > 导航栏平滑隐藏显示技巧分享

导航栏平滑隐藏显示技巧分享

2025-10-16 11:42:31 0浏览收藏

使用 CSS 过渡实现平滑动画

实现导航栏平滑显示和隐藏的关键在于使用 CSS 的 transition 属性。该属性允许你在 CSS 属性值发生变化时，平滑地过渡到新的值，从而创建动画效果。

首先，为导航栏的 CSS 类添加 transition 属性。例如，你可以选择 opacity 和 transform 属性进行过渡。

.main-header {
  width: 100%;
  height: 4em;
  background-color: black;
  position: absolute;
  top: 0;
  transition: all 0.5s; /* 所有属性变化都应用 0.5 秒的过渡效果 */
  transform: translateY(-100px); /* 初始状态：向上移动 100px，隐藏导航栏 */
  opacity: 0; /* 初始状态：完全透明 */
}

在上面的代码中，transition: all 0.5s; 表示所有可过渡的属性都将在 0.5 秒内完成过渡。transform: translateY(-100px); 和 opacity: 0; 定义了导航栏的初始隐藏状态。

使用 JavaScript 切换 CSS 类

接下来，你需要使用 JavaScript 来切换一个 CSS 类，该类会改变导航栏的 opacity 和 transform 属性，从而触发过渡效果。

首先，定义一个用于显示导航栏的 CSS 类：

.main-header.show {
  transform: none; /* 显示状态：不进行位移 */
  opacity: 1; /* 显示状态：完全不透明 */
}

然后，使用 JavaScript 获取导航栏元素和触发显示的按钮元素，并添加事件监听器：

const remover = document.querySelector(".displayer"); // 获取按钮元素
function vanish() {
  const navBar = document.querySelector(".main-header"); // 获取导航栏元素
  navBar.classList.toggle('show'); // 切换 'show' 类
}
remover.addEventListener("click", vanish); // 监听按钮点击事件

这段代码会在点击按钮时，在导航栏元素上添加或移除 show 类。当 show 类被添加时，导航栏的 transform 属性会变为 none，opacity 属性会变为 1，从而触发 CSS 过渡效果，使导航栏平滑地显示出来。当 show 类被移除时，导航栏会平滑地隐藏起来。

完整示例代码

以下是完整的 HTML、CSS 和 JavaScript 代码示例：

HTML:

CSS:

.main-container {
  width: 100vw;
  height: 100vh;
}

.main-header {
  width: 100%;
  height: 4em;
  background-color: black;
  position: absolute;
  top: 0;
  transition: all 0.5s;
  transform: translateY(-100px);
  opacity: 0;
}

.main-header.show {
  transform: none;
  opacity: 1;
}

html,body{margin: 0}

JavaScript:

const remover = document.querySelector(".displayer");
function vanish() {
  const navBar = document.querySelector(".main-header");
  navBar.classList.toggle('show');
}
remover.addEventListener("click", vanish);