向列表添加新元素时实现div容器的动画过渡效果

Hey there! Let's fix that jarring height jump when adding new list items to your container. Here's a straightforward way to get smooth height transitions working:

Step 1: Adjust the Container's Height Behavior #

First, we need to make sure the container's height adapts to its content instead of being constrained in a way that causes sudden jumps. Your original min-height: 242px is fine if you want a minimum height, but we need to let the container expand smoothly when content grows.

Step 2: Add CSS Transition for Smooth Animation #

CSS transitions won't work with height: auto directly in older browsers, but modern browsers support transitions with height: fit-content. For broader compatibility, we can use the max-height trick. Here are both approaches:

Option 1: Modern Browser Approach (Cleanest)

Update your CSS to use fit-content and add a transition for height changes:

/* Add this global rule to avoid layout issues from padding/border */
* {
  box-sizing: border-box;
}

.contner {
  position: relative;
  vertical-align: middle;
  width: 604px;
  padding-top: 10px;
  padding-bottom: 10px; /* Fill in your original value here */
  background-color: #FFFFFF;
  box-shadow: 0 1px 1px 1px rgba(0,0,0,0.1);
  margin: 40px auto;
  min-height: 242px; /* Keep this for minimum height */
  height: fit-content;
  transition: height 0.3s ease-in-out; /* Smooth transition over 0.3 seconds */
}

.toggle-area {
  height: fit-content; /* Ensure inner area adapts to list items */
}

Option 2: Cross-Browser Compatibility (Using max-height)

If you need to support older browsers that don't handle fit-content transitions, use max-height instead:

* {
  box-sizing: border-box;
}

.contner {
  position: relative;
  vertical-align: middle;
  width: 604px;
  padding-top: 10px;
  padding-bottom: 10px; /* Fill in your original value here */
  background-color: #FFFFFF;
  box-shadow: 0 1px 1px 1px rgba(0,0,0,0.1);
  margin: 40px auto;
  min-height: 242px;
  max-height: 2000px; /* Set a value larger than your maximum possible content height */
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}

How It Works #

• The transition property tells the browser to animate changes to the specified property (height or max-height) over a set duration.
• With fit-content, the container's height will smoothly expand as new list items are added.
• The max-height trick simulates this animation by transitioning from the current content height up to the large max-height value (which will never be exceeded by your content).

Just make sure you don't set a fixed height on either .contner or .toggle-area—let the content dictate the height, and the transition will handle the rest!

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