最大高度不考虑css传输

我试图创建一个CSS转换，当我点击一个按钮时，它会消失，而另一个元素将取代它

然而，我几乎完成了它。将class.hide应用到按钮时，它会“跳跃”（在不透明度完成之前，不会触摸height属性）。最大高度似乎不符合我在css中设置的css转换属性

代码笔：

HTML:

---

如果您在

按钮中添加
最大高度
。添加职业

类，它将停止跳跃

button.add-profession {
    width: 500px;
    padding-top: 16px;
    padding-bottom: 16px;
    max-height: 60px;             /*  added property  */
    ....

---

如果您在

按钮上添加
最大高度
。添加职业

类，它将停止跳跃

button.add-profession {
    width: 500px;
    padding-top: 16px;
    padding-bottom: 16px;
    max-height: 60px;             /*  added property  */
    ....

---

这是@LGSon的真实写照吗，发布答案：）这是@LGSon的真实写照吗，发布答案：）

function func() {
  document.getElementById('one').classList.add('hide');
  document.getElementById('two').classList.add('show');
}

button.add-profession {
    width: 500px;
    padding-top: 16px;
    padding-bottom: 16px;
    max-height: 60px;             /*  added property  */
    ....