实现平滑过渡效果的导航栏显示与隐藏-js教程-PHP中文网

实现平滑过渡效果的导航栏显示与隐藏

霞舞

发布： 2025-09-22 16:51:00

原创

429人浏览过

实现平滑过渡效果的导航栏显示与隐藏

本文旨在提供一种使用 CSS 过渡和 JavaScript 类切换，为导航栏添加平滑显示与隐藏效果的实用方法。通过修改 CSS 属性（如 opacity 和 transform）并结合 JavaScript 的事件监听，可以轻松实现导航栏的动画效果，提升用户体验。本文将详细介绍具体实现步骤，并提供完整的代码示例。

使用 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 获取导航栏元素和触发显示的按钮元素，并添加事件监听器：

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

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:

<section class="main-container">
  <header class="main-header show"></header>
  <button class="displayer" style="margin-top: 5em;">Click Here</button>
</section>

登录后复制

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);

登录后复制