基于CSS与JavaScript实现页面切换滑动动画的适配问题

Hey Matt, great start on that slide animation! The container sizing issue is happening because you're using hardcoded maxHeight values on your pages and the container isn't set to adapt to its active content's height. Let's fix that step by step:

First, let's diagnose the root problems: #

• Your .container has a fixed width but no dynamic height handling, so it can't shrink/grow with the active page
• The maxHeight: 0 on hidden pages is forcing the container to ignore their content size, but it also messes up the transition flow
• The positioning on your .page elements is causing layout shifts instead of just visual transforms

Here's the revised code that fixes the sizing and smooths the animation: #

HTML (no changes needed here, your structure is solid):

<div class="container">
  <div class="page">
    <div class="Header">page 1</div>
    <div class="Content"> content page 1 </div>
  </div>
  <div class="page">
    <div class="Header">page 2</div>
    <div class="Content"> content page 2 with longer text to test height adaptation! </div>
  </div>
  <div class="page">
    <div class="Header">page 3</div>
    <div class="Content"> content page 3 </div>
  </div>
</div>

CSS (key fixes here for sizing and animation):

.container {
  font-family: inherit;
  position: fixed;
  bottom: 40px;
  right: 40px;
  background-color: #eb6383;
  width: 300px;
  padding: 10px;
  /* Let container adapt to active page height */
  height: fit-content;
  /* Keep overflow hidden to clip off-screen pages */
  overflow: hidden;
  /* Optional: add a slight transition for container height changes */
  transition: height 0.3s ease;
}

.page {
  display: flex;
  flex-direction: column;
  /* Use absolute positioning so pages don't take up layout space */
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  background-color: yellow;
  /* Base state for all pages */
  opacity: 1;
  transform: translateX(0);
  transition: all 0.5s ease;
}

.hidden {
  /* Hide off-screen and make unclickable */
  opacity: 0;
  transform: translateX(100%);
  pointer-events: none;
}

.hide-page {
  /* Animate out to left */
  opacity: 0;
  transform: translateX(-100%);
}

.show-page {
  /* Animate in from right */
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

JavaScript (cleaned up to avoid hardcoded styles):

(function () {
  const pages = document.querySelectorAll(".page");
  
  // Initialize: show first page, hide others
  pages.forEach((item, idx) => {
    if (idx !== 0) {
      item.classList.add("hidden");
    }
  });

  // Add click handlers
  pages.forEach((item) => {
    item.addEventListener("click", (event) => {
      const currentPage = event.target.closest(".page");
      const nextPage = currentPage.nextElementSibling;
      
      // If we're on the last page, loop back to first (optional)
      if (!nextPage) return;
      
      // Trigger animations
      currentPage.classList.add("hide-page");
      nextPage.classList.remove("hidden");
      nextPage.classList.add("show-page");
      
      // Clean up classes after animation ends to reset state
      setTimeout(() => {
        currentPage.classList.remove("hide-page");
        currentPage.classList.add("hidden");
      }, 500); // Match transition duration
    });
  });
})();

Key improvements explained: #

1. Container Sizing: Added height: fit-content to .container so it automatically adjusts to the height of the active page. The absolute positioning on .page ensures only the active page contributes to the container's height calculation.
2. Smoother Animation: Switched from left to transform for movement (better performance!) and added pointer-events: none to hidden pages so users can't click them accidentally.
3. Cleaner State Management: Removed hardcoded maxHeight styles from JS and rely solely on CSS classes to control visibility/animation. The timeout cleans up classes after the animation finishes to keep the DOM tidy.

Try adding longer content to any page now—you'll see the container adjusts its height automatically while keeping the slide animation smooth!

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