如何调整CSS动画中元素的收缩方向：实现从上到下收缩

Ah, I’ve run into this exact issue before! When animating an element’s height from 100px down to 0, browsers default to shrinking from the bottom up because the element’s layout is anchored to its top-left corner. Let’s fix that so your form collapses top-to-bottom instead—here are two solid solutions:

Method 1: Anchor with Absolute Positioning #

This method locks your form to the top of a parent container, so when it shrinks, it pulls the bottom edge upward instead of letting the top edge drop.

CSS Code: #

/* Wrap your form in this container */
.form-wrapper {
  position: relative;
  height: 100px; /* Match your form's starting height */
  overflow: hidden; /* Hide the shrinking part of the form */
}

form {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  transition: height 0.4s ease; /* Adjust timing for smoother animation */
  /* Add your existing form styles here */
}

/* Class to trigger the collapse */
form.collapsed {
  height: 0;
}

JavaScript Update: #

Modify your existing JS to toggle the collapsed class when needed:

const form = document.querySelector('form');
const submit = document.querySelector('.submit');

submit.addEventListener('click', () => {
  form.classList.toggle('collapsed');
});

Method 2: Use Transform to Shift the Form Up #

If you don’t want to mess with positioning, this trick uses transform: translateY() to simulate a top-to-bottom collapse by shifting the form upward as it shrinks.

CSS Code: #

form {
  height: 100px;
  overflow: hidden;
  transition: all 0.4s ease;
  transform: translateY(0);
}

form.collapsed {
  height: 0;
  transform: translateY(-100%); /* Shift up by the form's full height */
}

The JavaScript stays the same as Method 1—just toggle the collapsed class on your submit button click.

Quick Tips: #

• Always set overflow: hidden (on the form or its parent) to prevent content from spilling out during the animation.
• If your form has padding or margins, adjust the transform value or parent container height to account for extra space.
• Tweak the transition duration (like 0.4s) to match your desired animation speed.

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