html - 具有未知尺寸的动画 div 尺寸过渡

Question

我想为内容动态变化的 div 大小 (signupForm) 设置动画。

每一步容器div的大小未知。

我更愿意在 CSS 中执行此操作。

我正在使用 Vue.js 来替换表单。

<div class="signupForm">
  <component id="currentView">
    <FormOne></FormOne>
    <FormTwo></FormTwo>
    <FormThree></FormThree>
    <FormFour></FormFour>
    <FormFive></FormFive>
  </component>
</div>

#signupForm 永远不会离开，但是 FormOne 会换成 FormTwo，等等。

我添加了以下内容:

.signupForm {
  max-height:inherit;
  display:inline-block;
  transition: max-height 0.3s ease-in-out;
}

但是过渡属性并没有太大帮助。有什么想法吗？

Answer 1

我不确定 max-height 是否有转换的可能性，也许这有帮助:

.signupForm {
  max-height:inherit;
  display:inline-block;
  transition: height 0.3s ease-in-out;
}