咨询：使用jQuery toggleClass实现平滑动画的问题及解决

Hey Dan, I’ve run into this exact issue before—let’s break down why your animation is laggy and get it running smoothly!

The Core Problem: height: auto Doesn’t Play Nice with Transitions #

Your current CSS sets a fixed height: 35px on .paragraph, but when you toggle a class to expand it, you’re probably trying to switch to height: auto (directly or indirectly). The problem? CSS transitions don’t support auto values—this forces the browser to calculate the final height on the fly, causing that laggy delay you’re seeing.

Solution 1: Use max-height (Quick & Dirty Fix) #

Instead of transitioning height, transition max-height to mimic the expand/collapse effect. Here’s how to adjust your code:

.paragraph {
  max-height: 35px; /* Match your initial collapsed height */
  overflow: hidden;
  transition: max-height 0.5s ease; /* Target only max-height for smoother performance */
  will-change: max-height; /* Hint to the browser to optimize this property */
}

/* Add this class for the expanded state */
.paragraph.expanded {
  max-height: 200px; /* Set a value larger than your longest paragraph's full height */
}

Then your jQuery stays simple:

$('.your-toggle-element').click(function() {
  $('.paragraph').toggleClass('expanded');
});

Why this works: max-height is a numerical value that CSS can smoothly transition between. The will-change property tells the browser to prepare for animations on this element, reducing layout thrashing.

Solution 2: Dynamic Height Calculation (Precise & Smooth) #

If you want pixel-perfect control (no extra empty space from a large max-height), use JavaScript to calculate the element’s full scroll height and transition to that value:

.paragraph {
  height: 35px;
  overflow: hidden;
  transition: height 0.5s ease;
  will-change: height;
}

$('.your-toggle-element').click(function() {
  const paragraph = $('.paragraph');
  
  if (paragraph.hasClass('expanded')) {
    // Collapse back to initial height
    paragraph.css('height', '35px');
  } else {
    // Calculate full height of the content
    const fullHeight = paragraph[0].scrollHeight;
    paragraph.css('height', `${fullHeight}px`);
  }
  
  // Toggle the class after setting the height
  paragraph.toggleClass('expanded');
});

This method ensures the animation transitions exactly to the content’s height, eliminating any weird delays from guessing max-height.

Bonus Tips for Extra Smoothness #

• Avoid broad transition declarations: Instead of transition: .5s, specify the exact property (like transition: max-height 0.5s ease)—this prevents unnecessary transitions on other properties (like padding or color) that could cause lag.
• Check for layout thrashing: If your page has lots of elements, make sure the toggle action isn’t triggering excessive reflows. Using will-change helps, but you can also wrap height changes in requestAnimationFrame if needed.
• Test with ease timing function: The default transition timing is ease, which starts slow, speeds up, then slows down—this feels more natural than a linear transition for expand/collapse effects.

Give these fixes a try, and your toggle animation should be buttery smooth in no time!

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