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

Question

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

我正在练习一些 CSS 动画，我希望 form 元素的高度从 100px -> 0 开始，但我希望它从 TOP 到 BOTTOM 执行此操作.相反，默认情况下，它从底部到顶部。

那么我该如何更改元素决定在其自身上“关闭”的位置呢？

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>