更改元素变小时"moves towards"的方向

Question

首先，我为这个可怕的标题道歉，但这可能就是我自己找不到答案的原因。

我正在练习一些CSS动画，我希望form元素的高度从100px -> 0开始，但我希望它从上到下做到这一点。相反，默认情况下，它从底部到顶部。

那么，如何更改元素决定自行"关闭"的位置呢？

const form   = document.querySelector('form');
const submit = document.querySelector('.submit');
const div    = document.querySelector('div');
submit.addEventListener('click', e => {
  e.preventDefault();
  
  form.classList.add('height');
  /* div.classList.add('div--animate'); */
});

form {
  /* background: lightblue; */
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100px;
  overflow: hidden;
  position: relative;
  transition: height .15s linear, width .15s linear;
  width: 400px;
}
.height {
  height: 0;
  width: 0;
}

<form>
  <input type="text" placeholder="name">
  <input type="text" placeholder="email">
  <input class="submit" type="submit">
</form>

Answer 1

您可以考虑缩放转换，并调整转换原点以决定元素应转到的位置。如果需要，您还可以保留宽度/高度，但为其添加延迟，以便在比例结束时更改它们。

const form   = document.querySelector('form');
const submit = document.querySelector('.submit');
const div    = document.querySelector('div');
submit.addEventListener('click', e => {
  e.preventDefault();
  
  form.classList.add('height');
});

form {
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100px;
  overflow: hidden;
  position: relative;
  transition: transform .15s linear,height 0s .15s linear,width 0s .15s linear;
  transform-origin:bottom right; /* center | top right | left | ...*/
  width: 400px;
}
.height {
  width:0;
  height:0;
  transform:scale(0);
}

<form>
  <input type="text" placeholder="name">
  <input type="text" placeholder="email">
  <input class="submit" type="submit">
</form>