React单条目展开/折叠列表：实现平滑过渡效果需求

Got it, let's get those smooth expand/collapse transitions added to your single-open accordion! Since you already have the core functionality locked in (only one item open at a time), we just need to tweak the CSS and maybe adjust how we handle content height—because CSS transitions don't play nice with height: auto out of the box.

Here are two solid approaches to choose from:

Option 1: Pure CSS (Simple & Quick) #

This uses max-height to simulate the expand/collapse effect, since we can't transition height: auto directly. It's great for most cases where you have a rough idea of your content's maximum possible height.

HTML Structure #

First, let's assume your markup looks something like this (adjust classes to match your existing code):

<div class="accordion-list">
  <div class="accordion-item">
    <div class="accordion-header">Item 1</div>
    <div class="accordion-content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">Item 2</div>
    <div class="accordion-content">
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">Item 3</div>
    <div class="accordion-content">
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </div>
</div>

CSS for Transitions #

Add these styles to your existing CSS—this handles the smooth animation and state changes:

/* Base list styles */
.accordion-list {
  width: 350px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  overflow: hidden;
}

.accordion-item {
  border-bottom: 1px solid #e0e0e0;
}

/* Header styles (clickable trigger) */
.accordion-header {
  padding: 14px 16px;
  background-color: #f8f8f8;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.accordion-header:hover {
  background-color: #f0f0f0;
}

/* Content container (collapsed by default) */
.accordion-content {
  padding: 0 16px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease-in-out;
}

/* Active state for expanded items */
.accordion-item.active .accordion-content {
  max-height: 1000px; /* Set to a value larger than your tallest content */
  opacity: 1;
  padding: 14px 16px;
}

Your Existing JS (No Major Changes Needed) #

Since you already have the logic to toggle active states and close other items, just make sure it adds/removes the active class on the parent .accordion-item when clicked. Here's a quick reminder of that logic:

const accordionHeaders = document.querySelectorAll('.accordion-header');

accordionHeaders.forEach(header => {
  header.addEventListener('click', () => {
    const parentItem = header.closest('.accordion-item');
    const isAlreadyActive = parentItem.classList.contains('active');

    // Close all currently active items
    document.querySelectorAll('.accordion-item.active').forEach(item => {
      item.classList.remove('active');
    });

    // Toggle current item only if it wasn't active
    if (!isAlreadyActive) {
      parentItem.classList.add('active');
    }
  });
});

Option 2: JS-Assisted (Precise Height Control) #

If you have content with unpredictable heights (and don't want to guess a max-height), use JavaScript to calculate the exact height of the content when expanding. This gives a more polished, precise transition.

Adjusted CSS #

We'll transition height instead of max-height here:

.accordion-content {
  padding: 0 16px;
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: height 0.3s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease-in-out;
}

.accordion-item.active .accordion-content {
  opacity: 1;
}

Updated JS Logic #

This calculates the full scroll height of the content when expanding, then sets that as the explicit height:

const accordionHeaders = document.querySelectorAll('.accordion-header');
const transitionDuration = 300; // Match this to your CSS transition time

accordionHeaders.forEach(header => {
  header.addEventListener('click', () => {
    const parentItem = header.closest('.accordion-item');
    const content = parentItem.querySelector('.accordion-content');
    const isAlreadyActive = parentItem.classList.contains('active');

    // Close all other active items first
    document.querySelectorAll('.accordion-item.active').forEach(item => {
      const otherContent = item.querySelector('.accordion-content');
      item.classList.remove('active');
      otherContent.style.height = '0';
      // Delay padding change to match transition
      setTimeout(() => {
        otherContent.style.padding = '0 16px';
      }, transitionDuration);
    });

    if (!isAlreadyActive) {
      parentItem.classList.add('active');
      // Calculate full height of the content (including padding)
      const fullContentHeight = content.scrollHeight + 'px';
      // Add padding first so height calculation is accurate
      content.style.padding = '14px 16px';
      content.style.height = fullContentHeight;
    } else {
      // Collapse the current item
      content.style.height = '0';
      setTimeout(() => {
        content.style.padding = '0 16px';
      }, transitionDuration);
    }
  });
});

Pro Tips #

• Tweak the Transition Timing: Adjust 0.3s to 0.2s (faster) or 0.4s (slower) based on your preference. Use ease-in-out for a more natural feel.
• Avoid Overly Large max-height: If using Option 1, don't set max-height to something like 10000px—it'll make the transition feel slow even for small content.
• Add Visual Feedback: Hover effects on the header (like we did) or a small arrow icon that rotates when expanded can make the UI more intuitive.

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