WordPress Divi插件环境下移动端侧边菜单关闭动画不同步问题咨询

I see the problem here — when closing the mobile side menu, the menu container (menu_right) shrinks faster than the text and search icon inside it, causing a disjointed, unsynchronized animation. Let’s break down the root cause and fix it step by step.

Root Cause #

Looking at your code, the main issues are:

• The default .menu_right uses a fast transition: max-width 0.3s for closing, while the open state (.menu_right__open) uses a much longer transition (4s on mobile)
• The content inside the menu (links, search form) has no transition properties at all
• Duplicate click event listeners on the menu handler could cause unexpected behavior

When you close the menu, the container snaps shut quickly while inner elements don’t animate along with it, leading to the mismatched timing you’re seeing.

Step-by-Step Fix #

1. Standardize Transition Timing & Properties #

First, align the open/close transition timing and include all necessary properties to keep the container and content in sync. Update your CSS:

/* Base menu state - set default transition for consistent behavior */
.menu_right {
  max-width: 0;
  overflow: hidden;
  opacity: 0; /* Start hidden */
  /* Sync max-width and opacity transitions */
  transition: max-width 0.5s, opacity 0.5s ease-in-out;
}

/* Open menu state - inherit transition logic */
.menu_right__open {
  max-width: 100rem;
  height: 25rem;
  opacity: 1; /* Show content */
  transition: max-width 0.5s, opacity 0.5s ease-in-out;
  /* Remove !important to keep CSS maintainable */
}

/* Mobile-specific adjustments */
@media screen and (max-width: 768px) {
  .menu_right__open {
    height: 26rem;
    overflow-y: auto; /* Use auto for scroll if content overflows */
    transition: max-width 0.5s, opacity 0.5s ease-in-out;
  }
}

2. Add Transitions to Inner Menu Content #

Make sure text and search icons fade smoothly with the container by adding transitions to inner elements:

.menu_right ul,
.et_pb_search {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

/* Fade out content when menu is closed */
.menu_right:not(.menu_right__open) ul,
.menu_right:not(.menu_right__open) .et_pb_search {
  opacity: 0;
}

3. Clean Up Duplicate JavaScript Event Listeners #

You’re adding two click handlers to the menu button (one for desktop, one for mobile) which can cause conflicts. Combine them into a single, cleaner handler:

let isMenuOpen = false;
const menuHandler = document.querySelector('.menu_left_handler');
const menuTitle = document.querySelector('.menu_left_title');
const menuRight = document.querySelector('.menu_right');
const mobileMenu = document.getElementById("menuId");

// Single click handler for all screen sizes
menuHandler.addEventListener('click', () => {
  // Toggle menu visibility classes
  menuRight.classList.toggle('menu_right__open');
  mobileMenu.classList.toggle("menu_right__open");
  
  // Update button and title text
  isMenuOpen = !isMenuOpen;
  menuHandler.innerText = isMenuOpen ? '✕' : '☰';
  menuTitle.innerText = isMenuOpen ? 'STÄNG' : 'MENY';
});

// Remove the redundant mediaQ function since we're using a universal handler

Why This Works #

• By syncing max-width and opacity transitions for both the menu container and its inner content, we ensure everything fades and shrinks at the same pace
• Removing duplicate event listeners eliminates potential bugs that could break the animation
• Consistent transition timing (0.5s here — adjust to your preference) makes the open/close action feel smooth and cohesive across mobile devices

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