Question

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

在表格底部，我有一个上一个和下一个按钮。当前，如果将元素添加到表单中，则它们的位置会突然更改，因此，我希望包含表单的div逐渐更改。

我该怎么做？我不想向表单元素添加过渡（因为这将是过多的过渡），而只是为了包含DIV。

Answer 1

您可以在DIV上使用过渡效果。如果您说还可以，为什么不呢？

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

但是，为了使高度/宽度过渡有效，您需要预先在div上指定宽度/高度。如果未设置或将其设置为自动，则过渡仍然会突然进行。

这里是一个示例：https://codepen.io/anon/pen/rrYxQm

Answer 2

您不能将纯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>

这里的限制是您需要提前知道输入字段的高度。您会注意到，在此示例中，它被硬编码为50px。

注意：不用担心“过渡太多”。浏览器当然可以管理许多高度转换的子元素。

在各种内容上平滑地更改div高度

2 个答案: