响应式滑动导航加载闪烁问题求助

Hey there! Nice work getting that responsive navbar up and running with the smooth slide-in animation—let’s tackle that annoying flash where the nav briefly pops up before hiding on mobile page loads or window resizes.

The Root Cause #

The issue happens because even though you’ve set opacity: 0 and transform: translateX(-100%) on the mobile nav <ul>, the element is still technically present in the DOM and visible for a split second during initial rendering. Browsers sometimes apply transition properties a tiny bit after rendering the base styles, leading to that quick unwanted flash.

The Fix #

We’ll adjust the initial state of the nav <ul> to ensure it’s completely hidden from the get-go, while keeping the transition animation intact. Here’s how to update your CSS:

1. Add visibility: hidden to the mobile nav’s base state
   This ensures the element isn’t visible at all when the page loads, instead of just being transparent.
2. Add visibility: visible to the .shown class
   This brings the nav back into view smoothly when the hamburger button is clicked.

Updated CSS Snippet:

nav {
  // ... your existing nav styles ...
  
  ul {
    width: 100vw;
    height: 100vh;
    opacity: 0;
    display: flex;
    transform: translateX(-100%);
    top: 0;
    background: inherit;
    flex-direction: column;
    justify-content: center;
    transition: all 800ms ease-in;
    // Add this line to fully hide the nav initially
    visibility: hidden;

    @include desktop {
      // ... your existing desktop styles ...
      // Reset visibility for desktop view
      visibility: visible;
    }

    // ... your existing li/a styles ...
  }

  .shown {
    opacity: 1;
    transform: translateX(0);
    padding-top: 40px;
    padding-bottom: 40px;
    display: flex;
    // Add this line to restore visibility when active
    visibility: visible;

    @include desktop {
      // ... your existing desktop .shown styles ...
    }
  }
}

Why This Works #

• visibility: hidden removes the element from the visual flow entirely without breaking layout (unlike display: none, which would kill the transition animation).
• Combining it with opacity: 0 and transform: translateX(-100%) ensures the nav is completely hidden on initial load, and the transition still slides it in smoothly when the .shown class is toggled.
• We reset visibility: visible in the desktop media query so the nav stays visible on larger screens as intended.

Quick Double-Check #

Make sure your desktop mixin targets the correct breakpoint (e.g., @media (min-width: 768px)). Even if the breakpoint is off, adding the visibility property should still eliminate the flash entirely.

Give this a test, and that annoying initial flash should be gone for good! 😊

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