如何实现点击导航栏按钮触发全屏从右向左滑入后消失的加载动画

这个方案仅使用原生HTML/CSS/JS实现，无第三方依赖，符合作业要求，逻辑简单易修改。 #

1. 添加加载动画DOM结构 #

把这段代码放在body标签的最底部，确保层级最高：

<!-- 全屏加载动画容器 -->
<div id="fullscreen-loader">
  <!-- 可自定义加载提示内容 -->
  <p>加载中...</p>
</div>

2. 编写CSS样式 #

直接写到你的CSS文件里，或者加在<style>标签中：

#fullscreen-loader {
  /* 固定定位铺满视口 */
  position: fixed;
  top: 0;
  /* 默认放在视口右侧外，隐藏状态 */
  right: -100vw;
  width: 100vw;
  height: 100vh;
  background-color: #2385bb; /* 可自定义背景色 */
  z-index: 9999; /* 确保比页面所有元素层级高，不会被遮挡 */
  /* 动画过渡效果，控制right属性变化的速度和曲线 */
  transition: right 0.4s ease-in-out;
  /* 内部内容垂直水平居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
}

/* 激活状态：加载容器滑入铺满全屏 */
#fullscreen-loader.active {
  right: 0;
}

3. 编写JS交互逻辑 #

写到你的JS文件里，或者加在<script>标签中，放在页面底部：

// 获取元素
const loader = document.getElementById('fullscreen-loader');
// 替换成你的导航按钮的选择器，比如所有nav下的a标签
const navBtns = document.querySelectorAll('nav a');

// 给每个导航按钮绑定点击事件
navBtns.forEach(btn => {
  btn.addEventListener('click', function(e) {
    // 如果是锚点跳转，暂时阻止默认行为，等动画结束再跳转
    // e.preventDefault();

    // 激活加载动画，从右滑入铺满全屏
    loader.classList.add('active');

    // 延迟600ms后关闭动画，可根据自己想要的停留时间调整
    setTimeout(() => {
      loader.classList.remove('active');
      
      // 如果是锚点跳转，这里可以加跳转逻辑
      // window.location.hash = this.getAttribute('href');
    }, 600);
  })
});

可调参数说明 #

• 动画速度：修改CSS中transition的0.4s为你想要的时长，数值越大动画越慢
• 停留时长：修改JS中setTimeout的600数值，单位为毫秒，需要比动画时长多100-200ms保证动画流畅
• 样式自定义：可随意修改加载容器的背景色、内部文字/图标内容，无需改动逻辑
• 如果你的导航是用button标签实现的，把navBtns的选择器改成nav button即可

内容的提问来源于stack exchange，提问作者Shubham Garg