原生JS实现Slide Toggle快速点击后边框消失、高度异常问题排查

It sounds like your slide toggle is suffering from concurrent animation conflicts when clicked quickly—totally a common gotcha with vanilla JS animations. Let’s break down why this happens and how to fix it:

Root Cause #

When you spam the button fast, the animation function fires again before the previous one finishes. Since you’re checking div.style.height directly (which only reflects inline styles), the value might be stuck in the middle of an animation (like "230px" instead of "0px" or "500px"), throwing your toggle logic off. This leads to abrupt jumps to the final height and unexpected style glitches like missing borders.

Solution: Add Animation Locking & Reliable State Checking #

Here’s a revised implementation that fixes these issues:

const div = document.getElementById('div');
const btn = document.getElementById('button');
let isAnimating = false;
const targetHeight = '500px';
const initialHeight = '0px';

// Helper to get the actual current height of the element
function getCurrentHeight(element) {
  return parseInt(window.getComputedStyle(element).height, 10);
}

function animateSlide(element, startHeight, endHeight) {
  isAnimating = true;
  const duration = 300; // Adjust animation speed as needed
  const startTime = performance.now();
  const start = parseInt(startHeight, 10);
  const end = parseInt(endHeight, 10);
  const heightDifference = end - start;

  function step(timestamp) {
    const elapsedTime = timestamp - startTime;
    const animationProgress = Math.min(elapsedTime / duration, 1);
    const currentHeight = start + (heightDifference * animationProgress);
    
    element.style.height = `${currentHeight}px`;

    if (animationProgress < 1) {
      requestAnimationFrame(step); // Keep animating until done
    } else {
      // Set final state explicitly to avoid floating-point weirdness
      element.style.height = endHeight;
      isAnimating = false; // Unlock for next click
    }
  }

  requestAnimationFrame(step);
}

function clickFunction() {
  if (isAnimating) return; // Block new clicks until current animation finishes

  const currentHeight = getCurrentHeight(div);
  const nextHeight = currentHeight === 0 ? targetHeight : initialHeight;
  
  // Ensure border stays visible (match this to your element's actual border style)
  div.style.border = '1px solid #333';

  animateSlide(div, `${currentHeight}px`, nextHeight);
}

btn.addEventListener('click', clickFunction);

Key Fixes & Improvements #

• Animation Locking: The isAnimating flag prevents overlapping animations, so rapid clicks won’t break the toggle flow.
• Reliable State Checks: Using getComputedStyle instead of inline style.height gives us the actual current height, even if it’s set via CSS classes.
• Smooth, Consistent Animations: requestAnimationFrame syncs with the browser’s refresh rate for smoother movement, and we explicitly set the final height to avoid tiny floating-point inaccuracies.
• Border Preservation: We explicitly set the border style during each toggle to ensure it doesn’t vanish unexpectedly (tweak this line to match your element’s styling).

Quick Extra Tip #

If your element uses overflow: hidden, make sure it’s applied consistently to prevent content from peeking through during the animation.

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