如何为隐藏的div添加滑动效果？附现有显示切换代码

Hey there! Nice to see you wanting to spruce up that basic show/hide with a smooth slide effect. Let's fix this up using plain CSS and JavaScript—no external libraries needed.

The Problem with Your Current Code #

Right now, your code toggles display: none and display: block, which are instant, binary states. CSS transitions can't animate display, so we need a different approach to get that sliding feel.

Solution 1: CSS Transitions (Recommended) #

This is the cleanest, most maintainable way. We'll use max-height and CSS transitions to simulate the slide, since height: auto can't be animated directly.

Step 1: Add CSS for the Transition

#info {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out; /* Adjust duration (0.3s) and easing as needed */
}

#info.active {
  max-height: 200px; /* Set a value larger than your content's maximum possible height */
}

Step 2: Update the JavaScript

Instead of toggling display, we'll toggle a CSS class to trigger the transition:

function show() {
  const infoDiv = document.getElementById("info");
  infoDiv.classList.toggle("active");
}

Step 3: Update Your HTML

Remove the inline style="display:none" since we're handling the initial state in CSS:

<a onclick="show()">Toggle Info</a>
<div id="info">
  <a href="#">1111111111111111111111111111111</a>
</div>

Why this works: When you add the active class, max-height animates from 0 to 200px, revealing the content. Removing the class animates it back to 0. Just make sure max-height is set higher than your content's actual height so the animation doesn't get cut off.

Solution 2: Native JavaScript Animation (For Fine Control) #

If you need more precise control over the animation speed or behavior, you can manually animate the height using setTimeout for simplicity:

CSS Setup

#info {
  overflow: hidden;
  display: none;
  height: auto;
}

Updated JavaScript

function show() {
  const infoDiv = document.getElementById("info");
  const slideSpeed = 5; // Pixels per frame
  const frameDelay = 10; // Milliseconds between frames

  if (infoDiv.style.display === "none" || infoDiv.style.display === "") {
    // Slide down to show
    infoDiv.style.display = "block";
    const fullHeight = infoDiv.scrollHeight; // Get actual content height
    infoDiv.style.height = "0px";

    let currentHeight = 0;
    const animateDown = () => {
      currentHeight += slideSpeed;
      if (currentHeight >= fullHeight) {
        infoDiv.style.height = "auto"; // Reset to auto for dynamic content
        return;
      }
      infoDiv.style.height = `${currentHeight}px`;
      setTimeout(animateDown, frameDelay);
    };
    animateDown();
  } else {
    // Slide up to hide
    const fullHeight = infoDiv.scrollHeight;
    let currentHeight = fullHeight;

    const animateUp = () => {
      currentHeight -= slideSpeed;
      if (currentHeight <= 0) {
        infoDiv.style.height = "0px";
        infoDiv.style.display = "none";
        return;
      }
      infoDiv.style.height = `${currentHeight}px`;
      setTimeout(animateUp, frameDelay);
    };
    animateUp();
  }
}

This approach lets you tweak the speed and animation steps, but it's more code. Use this if you have dynamic content heights that change often and need the animation to adapt perfectly.

Either method will give you that smooth slide effect you're looking for. The CSS transition method is my go-to for most cases—it's simpler and performs better.

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