如何为按钮开关设置不同CSS动画？移动端导航动画优化咨询

Hey there! Great job getting the basic nav animation working—let's streamline that code and add those button state animations you want. Here's how to do it cleanly:

1. Ditch the Two Divs: Single Container with CSS Transitions #

Your current two-div approach works, but we can simplify it to a single navigation container using transform and transition instead of toggling display. This keeps the animation smooth and cuts down on redundant DOM elements.

HTML Structure #

<button class="hamburger-btn" aria-label="Toggle navigation">
  <span class="hamburger-line"></span>
  <span class="hamburger-line"></span>
  <span class="hamburger-line"></span>
</button>

<nav class="mobile-nav">
  <a href="/home">Home</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>

CSS for Navigation Animation #

.mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 2rem;
  /* Start off-screen */
  transform: translateY(-100%);
  /* Smooth transition for the slide effect */
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-nav.active {
  /* Slide into view */
  transform: translateY(0);
}

2. Add Animated State Changes to the Hamburger Button #

Absolutely, you can add distinct animations for the button's open/closed states. We'll use CSS transforms and transitions to turn the hamburger lines into a close icon, and vice versa.

CSS for Hamburger Button Animation #

.hamburger-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0.5rem;
}

.hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background: #333;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* When the button is active (nav open) */
.hamburger-btn.active .hamburger-line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.hamburger-btn.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.hamburger-btn.active .hamburger-line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

3. JavaScript to Tie It All Together #

We just need a simple click handler to toggle the .active class on both the button and nav. We'll also close the nav when any link is clicked.

const hamburgerBtn = document.querySelector('.hamburger-btn');
const mobileNav = document.querySelector('.mobile-nav');
const navLinks = mobileNav.querySelectorAll('a');

// Toggle nav on button click
hamburgerBtn.addEventListener('click', () => {
  hamburgerBtn.classList.toggle('active');
  mobileNav.classList.toggle('active');
});

// Close nav when a link is clicked
navLinks.forEach(link => {
  link.addEventListener('click', () => {
    hamburgerBtn.classList.remove('active');
    mobileNav.classList.remove('active');
  });
});

Why This Works Better #

• Less code: No need for duplicate nav containers—just one element with a class toggle.
• Smoother animations: Using transform instead of display ensures the animation doesn't get interrupted (since display: none removes the element from the layout immediately).
• Maintainable: All state changes are controlled via CSS classes, making it easy to tweak animations later.

You can adjust the transition timing functions (like cubic-bezier) or durations to match your desired feel. For more complex button animations, you could even use CSS @keyframes, but the transition-based approach is simpler for most cases.

内容的提问来源于stack exchange，提问作者David Malášek