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

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

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

---

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

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

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

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

---

下面是一个示例：

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

这里有一个解决方案，使用经过转换的边距底部来减少元素在父元素中占用的空间，并使用

scale（1，0）

使元素在视觉上减小大小

setInterval（函数（）{
让form=document.getElementsByTagName（'form'）[0]；
让formItem=form.children[Math.floor（Math.random（）*3）]；
formItem.classList.toggle（'hidden'）；
}, 1000);
.page{
位置：固定；
框大小：边框框；
宽度：100%；高度：100%；
左：0；上：0；
填充：30px；
}
形式{
位置：相对位置；
背景色：#A0；
}
.表格项目{
高度：50px；
页边距底部：0；
溢出：隐藏；
位置：相对位置；
外形：1px纯黑；
背景色：#A0；
变换原点：0%0%；
变换：比例（1,1）；
过渡：页边距底部1s缓进缓出，转换1s缓进缓出；
}
.form-item.hidden{
边缘底部：-50px；
变换：缩放（1,0）；
}
.form item>.label{
保证金：0；
颜色：#ffffff；
}

第1项

第2项

第3项

第4项

您可以检查上一个问题，它可能会帮助您需要使用
最大高度
将动画设置为
自动
。