如何在onClick JS函数前自动设置样式？响应式导航加载异常求助

问题描述 #

我在开发自建网站的响应式导航栏，使用CSS的transform: translateX()属性控制侧边栏位置，通过showMenu、hideMenu两个JS函数修改属性值。目前遇到的问题是：在本地服务器重载移动端尺寸时，侧边栏会自动显示或短暂闪现，推测是CSS过渡时间导致。尝试在CSS中设置初始transform: translateX(100%)无效，想在页面加载后、首次点击showMenu按钮前设置初始样式，但刚学习JS不清楚正确语法。

相关代码如下：

JavaScript #

var navLinks = document.getElementById("navLinks");

function showMenu() {
  navLinks.style.transform = "translateX(0%)";
}

function hideMenu() {
  navLinks.style.transform = "translateX(100%)";
}

CSS #

.navlinks {
  display: flex;
  position: absolute;
  inset: 0 0 0 50%;
  background: hsl(0, 0%, 80%);
  z-index: 2;
  text-align: left;
  transform: translateX(100%);
  transition: 0.5s;
}

HTML #

<nav class="navbar">
  <div class="brand-title">
    <h4>Bottoms Up Tiki Tours</h4>
  </div>

  <div id="navLinks" class="navlinks">
    <div class="x" onClick="hideMenu()">
      <i class="bi bi-x"></i>
    </div>

    <ul class="navlist">
      <li class="active"><a href="#home">Home</a></li>
      <li><a href="#prices">Prices</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#booking">Booking</a></li>
      <li><a href="https://www.facebook.com/bottomsuptikitours"><svg 
                 xmlns="http://www.w3.org/2000/svg" width="13" height="13" 
                 fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 
                 16"><path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 
                 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h- 
                 2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 
                 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 
                 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 
                 6.75-7.951z"/></svg></a></li>
    </ul>
  </div>

  <div class="burger" onClick="showMenu()">
    <i class="bi bi-list"></i>
  </div>

</nav>

解决方案 #

方法1：延迟添加过渡效果（推荐） #

核心思路是让页面加载完成后再启用过渡动画，避免初始位置设置触发过渡。

1. 修改CSS，将过渡属性移到单独的类中：

.navlinks {
  display: flex;
  position: absolute;
  inset: 0 0 0 50%;
  background: hsl(0, 0%, 80%);
  z-index: 2;
  text-align: left;
  transform: translateX(100%);
  /* 移除原有的transition属性 */
}

/* 新增过渡类 */
.navlinks--with-transition {
  transition: transform 0.5s ease;
}

2. 修改JS，在页面加载完成后给侧边栏添加过渡类：

var navLinks = document.getElementById("navLinks");

// 页面完全加载后执行
window.addEventListener('load', function() {
  navLinks.classList.add('navlinks--with-transition');
});

function showMenu() {
  navLinks.style.transform = "translateX(0%)";
}

function hideMenu() {
  navLinks.style.transform = "translateX(100%)";
}

方法2：JS强制设置初始位置（快速修复） #

如果不想调整CSS结构，可通过JS在页面加载后强制重置初始位置，覆盖浏览器渲染异常：

var navLinks = document.getElementById("navLinks");

window.addEventListener('load', function() {
  // 强制设置侧边栏初始隐藏状态
  navLinks.style.transform = "translateX(100%)";
});

function showMenu() {
  navLinks.style.transform = "translateX(0%)";
}

function hideMenu() {
  navLinks.style.transform = "translateX(100%)";
}

问题原因 #

浏览器渲染页面时，可能因样式计算顺序问题，将初始transform设置与过渡效果同时触发，导致侧边栏从默认位置（translateX(0)）过渡到隐藏位置，视觉上表现为闪现后消失。延迟启用过渡或JS强制设置初始位置，可避开这个渲染时机冲突。

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