在不同内容上平滑更改div高度

Question

我有一个表单（包含在div中），我根据页面和某些条件显示和隐藏该表单的元素。

在表单的底部有一个“上一步”和“下一步”按钮。目前，如果在表单中添加元素，它们的位置会突然改变，因此我希望包含表单的div会逐渐改变。

我该怎么做？我不想将转换添加到表单元素中（因为这样会有太多的转换），只想为包含的DIV添加转换。

Answer 1

当从表单中添加/删除元素时，不能将纯css转换应用于父级上的大小更改。

这里有一个解决方案，使用经过转换的边距底部来减少元素在父元素中占用的空间，并使用scale（1，0）使元素在视觉上减小大小。

setInterval(function() {
  
  let form = document.getElementsByTagName('form')[0];
  let formItem = form.children[Math.floor(Math.random() * 3)];
  formItem.classList.toggle('hidden');
  
}, 1000);

.page {
  position: fixed;
  box-sizing: border-box;
  width: 100%; height: 100%;
  left: 0; top: 0;
  padding: 30px;
}
form {
  position: relative;
  background-color: #a0a0a0;
}
.form-item {
  height: 50px;
  margin-bottom: 0;
  overflow: hidden;
  position: relative;
  outline: 1px solid black;
  background-color: #a0a0a0;
  transform-origin: 0% 0%;
  
  transform: scale(1, 1);
  transition: margin-bottom 1s ease-in-out, transform 1s ease-in-out;
}
.form-item.hidden {
  margin-bottom: -50px;
  transform: scale(1, 0);
}
.form-item > .label {
  margin: 0;
  color: #ffffff;
}

<div class="page">
  <form>

    <div class="form-item">
      <p class="label">Item 1</p>
      <input type="text" name="item1"/>
    </div>
    
    <div class="form-item">
      <p class="label">Item 2</p>
      <input type="text" name="item2"/>
    </div>
    
    <div class="form-item">
      <p class="label">Item 3</p>
      <input type="text" name="item3"/>
    </div>
    
    <div class="form-item">
      <p class="label">Item 4</p>
      <input type="text" name="item4"/>
    </div>
    
    <div>
      <input type="button" name="prev" value="Prev"/>
      <input type="button" name="next" value="Next"/>
    </div>
    
  </form>
</div>

Answer 2

可以在div上使用转换。如果你说没问题，为什么不做呢？

.myDiv{
    -webkit-transition: height 1s ease;
    -transition: height 1s ease;
}

但是，为了使高度/宽度转换正常工作，您需要事先在div上指定宽度/高度。如果未设置或设置为“自动”，则转换仍将是突然的。

以下是一个例子：https://codepen.io/anon/pen/rrYxQm